Angular Form Builder를 사용하면 App Builder 편리해집니다.

양식은 데이터 수집에 필수적입니다. 어떤 앱을 빌드하든 어느 시점에서는 다른 용도로 사용되는 양식을 만들어야 합니다. App Builder의 Form Builder를 사용하면 직관적인 드래그 앤 드롭 인터페이스와 몇 가지 강력한 추가 기능을 통해 Angular 양식 생성을 간소화하여 양식을 더 빠르고 효율적으로 만들 수 있습니다.

그러나 이것에 대해서는 나중에 자세히 설명합니다. 이제 Forms를 살펴보고 App Builder가 Form Builder Angular 통합하여 양식 생성을 단순화하는 방법을 살펴보겠습니다.

Angular에서 Form Builder란 무엇입니까?

일반적으로 Angular에서 폼을 만들려면 컨트롤, 그룹 및 유효성 검사를 정의하는 상용구 코드를 작성해야 합니다. 그러나 Angular Form Builder를 사용하면 이러한 수동 작업이 줄어들고 오류가 제거됩니다. 따라서 Angular의 Form Builder는 위에서 언급한 레이아웃 구성, 양식 컨트롤, 유효성 검사, 그룹 등을 관리하면서 보다 간단하고 자동화된 양식 생성을 위한 보다 구조화된 방법을 제공하는 도구 또는 별도의 기능입니다.

로우 코드 도구인 App Builder ™ 는 최근 이러한 모든 기능을 제공하는 새로운 기능을 도입 했습니다. Angular 드래그 앤 드롭으로 작동하는 Form Builder는 API 엔드포인트에서 직접 양식 구조를 자동으로 생성하는 것과 같은 중요한 기능을 통해 HTML 양식을 빠르고 효율적으로 디자인할 수 있도록 하여 백엔드 통합을 다른 수준으로 끌어올리고 프로세스를 크게 단순화합니다.

또한 양식 레이아웃에는 광범위한 유연성이 있으며 제출, 오류 및 서버 측 유효성 검사에 대한 알림을 표시하는 옵션을 통해 심층적인 사용자 정의가 가능합니다.

Form Builder의 주요 측면: 

• 데이터 원본에서 끝점을 끌어다 놓아 자동으로 양식 만들기Create forms automatically by drag and drop an endpoint from your data source

• 양식의 구성 요소를 다른 등가물로 수정하여 양식을 더 풍부하게 만들기

• 처음부터 양식 만들기

• 생성된 양식의 CRUD 기능 테스트

• Angular 앱을 생성하고 프로덕션용 코드와 완벽한 코드 유연성을 갖춘 GitHub에 푸시

Angular에서 FormControl, FormGroup, FormArray 및 ControlValueAccessor 이해

Angular 앱에서 FormControl, FormGroup, FormArray 및 ControlValueAccessor는 반응형 양식의 가장 기본적인 구성 요소를 나타냅니다. 각각을 확인하고 역할과 기능을 이해하려고 노력합시다.

폼컨트롤

기본적으로 FormControl은 개별 양식 필드의 값과 유효성 검사 상태를 추적하는 데 사용되는 Angular의 클래스입니다. 또한 동기 및 비동기 유효성 검사를 지원합니다. 다음은 FormControl에 대한 몇 가지 핵심 사항입니다.

• 가치 추적: 양식 필드의 현재 값을 추적합니다.

• 상태 관리: 양식 필드의 상태(유효, 유효, 터치됨, 터치되지 않음)를 추적합니다.

• 유효성 검사: 동기 및 비동기 유효성 검사를 모두 지원합니다.

• 이벤트: 양식 필드와 관련된 사용자 상호 작용 및 이벤트에 대한 액세스를 제공합니다.

반응형 양식은 구성 요소 클래스를 기반으로 하기 때문에 Angular 반응형 양식 유효성 검사는 유효성 검사기 함수를 구성 요소 클래스의 양식 제어 모델에 직접 추가하여 수행됩니다.

값이 유효하면 유효성 검사기는 null을 반환합니다. 값이 유효하지 않은 경우 유효성 검사기는 일련의 오류를 생성하고 화면에 특정 오류 메시지를 표시할 수 있습니다.

아래 데모는 Angular 반응형 양식 유효성 검사를 사용하는 일반적인 영화 예약 양식을 보여주며, 영화, 전체 이름, 이메일 및 장르와 같은 필수 필드를 제출하기 전에 완료해야 합니다. 불완전한 입력은 특정 오류 메시지와 함께 빨간색으로 강조 표시되고 유효한 필드는 녹색으로 바뀝니다. "예약" 버튼은 모든 필드가 올바르게 채워질 때까지 비활성화 상태로 유지되며, 이 버튼이 활성화되어 양식을 성공적으로 제출할 수 있습니다.

폼 그룹

Angular의 FormGroup은 여러 FormControl 인스턴스를 집계하는 컨테이너입니다. 자식 form 컨트롤의 값과 유효성 검사 상태를 추적하여 해당 이름을 키로 사용하여 개체로 serialize합니다.

FormArray는 여러 이메일 주소 또는 전화 번호를 추가하는 것과 같이 다양한 수의 유사한 컨트롤이 필요한 양식에 특히 유용합니다.

사용자가 이메일 주소와 같은 여러 항목을 입력할 수 있는 양식의 코드 예제:

'@angular/core'에서 { Component } 가져오기; '@angular/forms'에서 { FormGroup, FormArray, FormControl, Validators } 가져오기; @Component({ selector: 'app-email-form', template: \' <form [formGroup]="form"> <div formArrayName="emails"> <div *ngFor="let email of emailArray.controls; let i = index"> <label for="email-{{ i }}">Email {{ i + 1 }}</label> <input id="email-{{ i }}" type="email" [formControlName]="i" placeholder="이메일 입력" /> <button type="button" (click)=& 인용; removeEmail(i)">제거</button> </div> </div> <button type="button" (click)="addEmail()">이메일 추가</button> <button type="submit" [disabled]="form.invalid">Submit</button> </form> <p>Form Value: {{ form.value | json }}</p> \', }) export class EmailFormComponent { form = new FormGroup({ emails: new FormArray([new FormControl('', Validators.email)]), }); get emailArray(): FormArray { return this.form.get('emails') as FormArray; } addEmail() { this.emailArray.push(new FormControl('', Validators.email)); } removeEmail(index: number) { this.emailArray.removeAt(index); } }

주요 기능은 다음과 같습니다.

• 그룹화: 여러 FormControl 인스턴스를 단일 개체로 결합합니다.

• Value Aggregation: 각 자식 컨트롤의 값을 추적하여 개체로 결합합니다.

• 유효성 검사 관리: 모든 자식 컨트롤의 유효성 검사 상태를 관리합니다.

다음은 코드 예제입니다.

const profileForm = new FormGroup({ firstName: new FormControl('', Validators.required), lastName: new FormControl(''), email: new FormControl('', [Validators.required, Validators.email]), });

이 코드 스니펫에서 자식 컨트롤이 유효하지 않은 경우 전체 그룹이 유효하지 않은 것으로 간주됩니다.

FormGroup 은 하나 이상의 양식 컨트롤에 대한 컨테이너 역할을 합니다. 관련 필드를 함께 그룹화하고 해당 값과 유효성 검사를 집합적으로 관리할 수 있습니다. 다음과 같이 초기화됩니다.

• 기본값: 빈 문자열(").

• Validators.required: 구성 요소 필드가 비어 있지 않은지 확인합니다.

위의 예에서 FormGroup이 수행하는 작업:

• 필드의 값 추적: datePicker의 현재 값을 액세스 가능하고 업데이트 가능한 상태로 유지합니다.

• 유효성 검사 관리: 양식을 제출하기 전에 필드가 유효한지 확인합니다.

• Encapsulates Logic: 여러 컨트롤을 하나의 논리적 단위로 결합하여 양식 관리를 단순화합니다.

폼어레이

FormArray는 FormGroup과 유사하지만 이름을 키로 사용하는 대신 컨트롤을 인덱스 배열로 구성합니다. 따라서 목록에 여러 항목을 추가하는 것과 같이 컨트롤의 수가 동적인 시나리오에 이상적입니다. 주요 기능은 다음과 같습니다.

• Dynamic Forms: 구조화된 배열에서 동적으로 생성된 양식을 수집합니다.

• Indexing: 배열에서 해당 인덱스를 사용하여 개별 양식에 액세스합니다.

• 상태 집계: 자식의 상태 값을 줄여 배열 상태를 계산합니다. 하나의 컨트롤이 유효하지 않으면 전체 배열이 유효하지 않은 것으로 간주됩니다.

ControlValueAccessor Angular

ControlValueAccessor는 Angular 양식이 사용자 지정 양식 컨트롤과 상호 작용할 수 있도록 하여 표준 양식 요소처럼 동작하도록 하는 인터페이스입니다. 양식 컨트롤로 작동하는 사용자 정의 구성 요소(예: 사용자 정의 날짜 선택기)를 만들 때 ControlValueAccessor를 구현하면 Angular의 반응형 양식과 원활하게 통합할 수 있습니다.

ControlValueAccessor의 예는 다음과 같습니다.

@Component({ selector: 'custom-input', providers: [ { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => CustomInputComponent), multi: true } ] }) export class CustomInputComponent는 ControlValueAccessor를 구현합니다. { // 여기에 구현이 있습니다. }

이 설정은 사용자 정의 입력 구성 요소가 기본 양식 요소와 같은 Angular 양식 내에서 사용될 수 있도록 합니다. 얻을 수 있는 것은 다음과 같습니다.

• 원활한 통합: 사용자 지정 구성 요소가 Angular 양식으로 작동할 수 있습니다.

• 재사용성: 재사용 가능한 양식 구성 요소를 만들 수 있습니다.

• 일관성: 사용자 정의 컨트롤이 Angular의 양식 API를 준수하도록 합니다.

Angular Form Builder와 로우코드 툴의 결합의 이점

속도와 효율성은 오늘날 앱을 구축할 때 필수적입니다. 따라서 양식을 만들 때도 팀은 결과를 최적화하고 노력을 강화할 수 있는 최상의 방법을 찾습니다. 로우 코드 Angular Form Builder를 결합하는 것은 몇 가지 이점을 보장하는 전략적 움직임이 됩니다.

신속한 양식 생성 

수동으로 양식을 만들고 코드를 작성하는 것은 코드 생성보다 훨씬 더 오래 걸립니다. App Builder의 드래그 앤 드롭 양식 작성 환경을 사용하면 광범위한 코딩 없이 양식을 더 빠르게 만들 수 있는 도구와 기능을 사용할 수 있습니다. API 엔드포인트에서 바로 완전한 양식을 쉽게 생성할 수 있으므로 상당한 시간과 노력을 절약할 수 있습니다.

전체 사용자 정의 

속도 외에도 유연성과 사용자 정의를 찾을 수 있습니다. App Builder의 Angular Form Builder를 사용하면 브랜딩 및 요구 사항에 맞게 스타일, 구성 요소 및 양식 레이아웃을 조정할 수 있습니다. 유효성 검사, 오류 메시지 및 기타 사용자 지정 개선 사항을 추가하는 데 도움이 되는 직관적인 구성이 있습니다.

협업 개선 

양식을 만드는 데는 일반적으로 경험을 브랜딩하는 디자이너도 포함됩니다. 이로 인해 팀이 승인 및 개발을 위해 핸드오프와 설계 파일을 교환하면서 양식을 작성하는 데 걸리는 시간이 길어지는 경우가 많습니다. 그러나 App Builder 및 Angular Form Builder 기능을 사용하면 매번 양식 구조를 테스트하고 디버그할 필요가 없으므로 이러한 협업이 향상됩니다. 직관적인 인터페이스는 즉시 쉽게 생성할 수 있는 양식으로 단순화된 디자인 프로세스를 보장합니다. 광범위한 기술 전문 지식이 필요하지 않습니다.

확장성 

응용 프로그램이 커질 수 있으며 이를 위해서는 확장성이 필요합니다. App Builder의 최신 Form Builder 기능으로 구축된 양식은 확장 가능하며 모든 사용 수준에서 고성능을 유지합니다.  또한 공급업체에 종속되지 않기 때문에 귀하와 귀하의 팀은 앱의 기능을 포기하지 않습니다.

App Builder에서 Angular 양식을 작성하는 방법

이 방법 가이드에서는 자동 및 수동의 두 가지 방법을 보여줍니다. App Builder에서 마스터 디테일 시나리오를 매우 명확하게 보여주는 기존의 나란히 레이아웃부터 시작하겠습니다. 고객 목록이 있고 이러한 고객을 양식으로 업데이트합니다.

자동 양식 생성

1단계: 데이터 엔드포인트 드래그 

시작하려면 데이터 끝점을 디자인 화면으로 끌어 옵니다. 양식 구성 요소 세트는 끝점의 속성에 따라 자동으로 생성됩니다.

• POST 및 PUT 메서드는 데이터 제출을 위한 입력 필드를 만듭니다.

• OnSuccess 및 OnError 상호 작용과 같은 기본 이벤트 처리는 자동으로 구성됩니다.

2단계: 자동 양식 컨트롤 생성 및 매핑 

양식 컨트롤은 각 필드의 데이터 유형 및 메타데이터를 기반으로 생성되어 직관적인 입력 및 레이블을 보장합니다(예: 날짜 필드는 날짜 선택기 사용, 부울 필드는 스위치 사용). 개발자는 속성 패널에서 직접 구성 요소를 수정하거나, 유효성 검사를 추가하거나, 레이블을 조정할 수 있는 모든 권한을 보유합니다.

3단계: 양식 편집 

생성된 양식은 필드를 포함하거나 제외하고, 레이블을 사용자 지정하고, 입력 유효성 검사를 설정하도록 수정하여 직관적인 디자인 경험을 제공할 수 있습니다. App Builder 통해 개발자는 양식 레이아웃과 구성 요소를 모두 조정할 수 있습니다.

• 양식 내에서 요소를 쉽게 추가하거나 제거할 수 있습니다.

• ​Required 및 Disabled validations, label customization, and mapping과 같은 제어 속성을 조정합니다.

• 작업 버튼을 구성합니다.

수동 양식 작성

에서 수동으로 Forms을 작성할 수도 있습니다 App Builder. 이 방법의 이점은 데이터 원본에 대한 즉각적인 바인딩 없이 구조와 레이아웃을 완벽하게 제어할 수 있다는 것입니다.

1단계: 요소 드래그 앤 드롭 

이것은 입력 필드, 버튼 및 양식 구성 요소와 같은 요소를 Form 컨테이너로 끌어다 놓아 양식을 디자인함으로써 발생합니다.

2단계: 데이터 소스 바인딩 

양식이 디자인되면 개발자는 구성된 데이터 소스의 끝점에 양식을 바인딩할 수 있습니다. 이러한 유연성은 데이터 상호 작용을 정의하기 전에 양식 요소를 구체화할 수 있는 기능을 보장합니다.

3단계: 바인딩 동작 및 유효성 검사 

폼이 작성된 후 끝점 간에 전환하는 경우 일치하지 않는 입력은 잘못된 바인딩 경고를 표시하고 해당 바인딩은 코드 출력에서 끊어진 바인딩으로 생성되지 않습니다. API 데이터 엔드포인트를 사용하여 양식 끝점 바인딩 대화 상자에서 새 변수를 초기화하여 양식 초기화에 필요한 컨텍스트를 제공할 수도 있습니다.

잘못된 바인딩은 생성된 코드에서 제외되어 응용 프로그램이 오류 없이 컴파일되도록 합니다. 엔드포인트를 전환할 때 중단을 최소화하기 위해 App Builder는 잠재적인 무효화에 대한 경고를 제공합니다.

결론

어떤 접근 방식을 선택하든 결국 App Builder의 미리보기 모드를 사용하여 양식과 상호 작용하고 성공 또는 유효성 검사 오류를 나타내는 알림과 함께 실시간 입력 유효성 검사 또는 양식 제출을 볼 수 있습니다.