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.
이것이 내가 그것을 이해하는 방법이며 누군가에게 도움이되기를 바랍니다.
답변
