내가 사용하고 ReactiveFormsModule
양식을 포함하는 구성 요소를 만들 수 Angular2의. 내 코드는 다음과 같습니다.
foo.component.ts :
constructor(fb: FormBuilder) {
this.myForm = fb.group({
'fullname': ['', Validators.required],
'gender': []
});
}
foo.component.html (사용 [formControl]
) :
<div class="fields">
<div class="field">
<label>Fullname*</label>
<input type="text" [formControl]="myForm.controls.fullname"/>
</div>
</div>
<div class="inline fields">
<label for="gender">Gender</label>
<div class="field">
<div class="ui radio checkbox">
<input type="radio" name="gender" checked="" tabindex="0" class="hidden" [formControl]="myForm.controls.gender">
<label>Male</label>
</div>
</div>
<div class="field">
<div class="ui radio checkbox">
<input type="radio" name="gender" tabindex="0" class="hidden" [formControl]="myForm.controls.gender">
<label>Female</label>
</div>
</div>
</div>
foo.component.html (사용 formControlName
) :
<div class="fields">
<div class="field">
<label>Fullname*</label>
<input type="text" formControlName="fullname"/>
</div>
</div>
<div class="inline fields">
<label for="gender">Gender</label>
<div class="field">
<div class="ui radio checkbox">
<input type="radio" name="gender" checked="" tabindex="0" class="hidden" formControlName="gender">
<label>Male</label>
</div>
</div>
<div class="field">
<div class="ui radio checkbox">
<input type="radio" name="gender" tabindex="0" class="hidden" formControlName="gender">
<label>Female</label>
</div>
</div>
</div>
두 가지 방법 모두 작동합니다. 하지만 사용 [formControl]
과 formControlName
. 의 차이점을 파악할 수 없습니다 .
답변
[formGroup]
두 번째 예의 지시문 이라는 중요한 점을 놓쳤다 고 생각합니다 . formControlName
와 함께 사용 [formGroup]
하여 양식을 여러 점 탐색으로 저장합니다. 예를 들면 :
<div>
<input type="text" [formControl]="myForm.controls.firstName"/>
<input type="text" [formControl]="myForm.controls.lastName"/>
<input type="text" [formControl]="myForm.controls.email"/>
<input type="text" [formControl]="myForm.controls.title"/>
</div>
다음과 같습니다.
<div [formGroup]="myForm">
<input type="text" formControlName="firstName"/>
<input type="text" formControlName="lastName"/>
<input type="text" formControlName="email"/>
<input type="text" formControlName="title"/>
</div>
이제 중첩을 상상해보십시오 FormGroups
🙂
답변
[formControl]
FormControl
생성 한 인스턴스에 대한 참조를에 할당 합니다 FormControlDirective
.
formControlName
이름으로 컨트롤을 조회하기 위해 양식 모듈에 대한 문자열을 할당합니다.
컨트롤에 대한 변수를 생성하는 경우 .
Harry가 언급 한대로는 필요하지 않지만 , [formGroup]
더 복잡한 형태의 경우 지저분해질 수 있으므로 대신 사용 하는 것이 좋습니다 .
constructor(fb: FormBuilder) {
this.fullName = new FormControl('', Validators.required);
this.gender = new FormControl('');
this.myForm = fb.group({
'fullname': this.fullName,
'gender': this.gender
});
}
답변
허용되는 답변에 제공된 두 가지 항목에 세 번째 등가가 있습니다 (권장되지 않음).
<div [formGroup]="myForm">
<input type="text" [formControl]="firstName"/>
<input type="text" [formControl]="lastName"/>
<input type="text" [formControl]="email"/>
<input type="text" [formControl]="title"/>
</div>
여전히 [formGroup] 지시문을 사용하고 있습니다.
그러나이 템플릿을 오류없이 컴파일하려면 구성 요소에서 컨트롤을 FormControls가 아닌 AbstractControls로 선언해야합니다.
myComponent.ts
firstName: AbstractControl
lastName: AbstractControl
email: AbstractControl
title: AbstractControl
그러나 AbstractControls 선언은 권장되지 않으므로 오류 Cannot find control with unspecified name attribute
가 발생하면 스타일을 혼합했거나 컨트롤을 AbstractControls로 선언했을 가능성이 있습니다.
답변
Angular 문서 ( https://angular.io/guide/reactive-forms )에서 :
구성 요소
@Component({
...
})
export class ProfileEditorComponent {
profileForm = new FormGroup({
firstName: new FormControl(''),
lastName: new FormControl(''),
});
}
주형
<form [formGroup]="profileForm">
<label>
First Name:
<input type="text" formControlName="firstName">
</label>
<label>
Last Name:
<input type="text" formControlName="lastName">
</label>
</form>
FormGroup
에 컨트롤 그룹이 포함 된 것처럼 profileFormFormGroup
은FormGroup
지시문 을 사용하여 양식 요소에 바인딩되어 모델과 입력이 포함 된 양식 사이에 통신 계층을 생성합니다.formControlName
의해 제공된 입력
FormControlName
지시문에 정의 된 형태로 각각의 제어 입력을 결합FormGroup
답변
당신이 구독하고 사용할 수있는를 반환하는 (지금 당장 이걸 알고 있고, 아마 그 이상이있을 [formControl]
수 있습니다) FormControl
라는 속성이 있기 때문에 당신 과 함께 반응 프로그래밍 이점 을 사용할 수 있습니다. (예를 들어 사용자가 값을 변경하자마자 입력 이메일이 반복되지 않도록 확인하고자하는 등록 시나리오에 매우 유용합니다.)valueChanges
Observable