FormGroup는 키 각 컨트롤의 이름으로, 하나의 객체로 각 자식 FormControl의 값을 집계합니다.
const form = new FormGroup({
first: new FormControl('Nancy', Validators.minLength(2)),
last: new FormControl('Drew')
});
FormArray는 배열로 각 하위 FormControl의 값을 집계.
const arr = new FormArray([
new FormControl('Nancy', Validators.minLength(2)),
new FormControl('Drew')
]);
하나는 언제 다른 것보다 사용해야합니까?
답변:
FormArray는 FormGroup의 변형입니다. 주요 차이점은 데이터가 배열로 직렬화된다는 것입니다 (FormGroup의 경우 객체로 직렬화되는 것과 반대). 이것은 동적 양식과 같이 그룹 내에 얼마나 많은 컨트롤이 있을지 모르는 경우에 특히 유용 할 수 있습니다.
간단한 예를 들어 설명하겠습니다. 피자에 대한 고객의 주문을 캡처하는 양식이 있습니다. 그리고 특별 요청을 추가하고 제거 할 수있는 버튼을 배치합니다. 다음은 구성 요소의 html 부분입니다.
<section>
<p>Any special requests?</p>
<ul formArrayName="specialRequests">
<li *ngFor="let item of orderForm.controls.specialRequests.controls; let i = index">
<input type="text" formControlName="{{i}}">
<button type="button" title="Remove Request" (click)="onRemoveSpecialRequest(i)">Remove</button>
</li>
</ul>
<button type="button" (click)="onAddSpecialRequest()">
Add a Request
</button>
</section>다음은 특수 요청을 정의하고 처리하는 구성 요소 클래스입니다.
constructor () {
this.orderForm = new FormGroup({
firstName: new FormControl('Nancy', Validators.minLength(2)),
lastName: new FormControl('Drew'),
specialRequests: new FormArray([
new FormControl(null)
])
});
}
onSubmitForm () {
console.log(this.orderForm.value);
}
onAddSpecialRequest () {
this.orderForm.controls
.specialRequests.push(new FormControl(null));
}
onRemoveSpecialRequest (index) {
this.orderForm.controls['specialRequests'].removeAt(index);
}FormArray는 FormGroup의 "addControl", "removeControl", "setValue"등을 사용하는 것보다 "push", "insert"및 "removeAt"을 사용하여 FormControls를 조작하는 것이 더 쉽다는 점에서 FormGroup보다 더 많은 유연성을 제공합니다. FormArray 메서드는 컨트롤이 양식의 계층 구조에서 제대로 추적됩니다.
도움이 되었기를 바랍니다.
반응 형을 만들려면 부모 FormGroup가 필수입니다. 여기 FormGroup에는 formControls, child formGroups또는formArray
FormArrayformControls또는 formGroup자체의 배열을 더 포함 할 수 있습니다 .
언제 formArray를 사용해야합니까?
사용법을 설명하는 이 아름다운 게시물 을 읽으십시오.formArray
그 블로그의 흥미로운 예는 여행에 관한 것입니다. formGroup
and를 formGroup사용 하는 여행의 구조는 다음과 같습니다.formControlformArray
this.tripForm = this.fb.group({
name: [name, Validators.required],
cities: new FormArray(
[0] ---> new FormGroup({
name: new FormControl('', Validators.required),
places: new FormArray(
[0]--> new FormGroup({
name: new FormControl('', Validators.required),
}),
[1]--> new FormGroup({
name: new FormControl('', Validators.required),
})
)
}),
[1] ---> new FormGroup({
name: new FormControl('', Validators.required),
places: new FormArray(
[0]--> new FormGroup({
name: new FormControl('', Validators.required),
}),
[1]--> new FormGroup({
name: new FormControl('', Validators.required),
})
)
}))
})
이 플레이하는 것을 잊지 마세요 DEMO 및 위해 배열의 사용을주의 cities하고 places여행의.
출처 : Anton Moiseev Book "Angular Development with Typescript, Second Edition" :
당신이해야 할 경우 프로그램 추가 (또는 삭제) 컨트롤을 A와 형태 , 사용 FormArray을 . FormGroup 과 유사 하지만 길이 변수가 있습니다. 반면 FormGroup가 나타냅니다 전체 양식 또는 양식의 필드의 고정 부분 집합을 , FormArray은 일반적으로 표현 성장 또는 축소 할 수 폼 컨트롤의 모음 .
예를 들어 FormArray 를 사용하여 사용자가 임의의 수의 이메일을 입력하도록 허용 할 수 있습니다 .
각도 문서에서 볼 수 있습니다.
FormArray는 명명되지 않은 컨트롤을 관리하기위한 FormGroup의 대안입니다. 양식 그룹 인스턴스와 마찬가지로 양식 배열 인스턴스에서 컨트롤을 동적으로 삽입 및 제거 할 수 있으며 양식 배열 인스턴스 값과 유효성 검사 상태는 자식 컨트롤에서 계산됩니다. 그러나 각 컨트롤에 대해 이름으로 키를 정의 할 필요가 없으므로 사전에 자식 값의 수를 모르는 경우 좋은 옵션입니다.
그들의 예를 보여 드리고 제가 이것을 어떻게 이해하는지 설명해 드리겠습니다. 여기에서 소스를 볼 수 있습니다.
양식 마녀가 다음 필드를 가지고 있다고 상상해보십시오.
profileForm = this.fb.group({
firstName: ['', Validators.required],
lastName: [''],
address: this.fb.group({
street: [''],
city: [''],
state: [''],
zip: ['']
}),
aliases: this.fb.array([
this.fb.control('')
])
});
여기 firstName에 lastName, address및 aliasesAll 필드가 함께 양식 그룹이므로 모든 것을 group. 동시에 address하위 그룹과 같으므로 다른 그룹으로 래핑합니다 group(더 나은 이해를 위해 템플릿을 볼 수 있습니다)! 여기에서 모든 폼 컨트롤은 key제외 aliases하고 .NET 과 같은 formBuilder메서드를 사용하여 간단한 배열처럼 원하는만큼 값을 넣을 수 있음을 의미합니다 push.
이것이 내가 그것을 이해하는 방법이며 누군가에게 도움이되기를 바랍니다.