formControlName과 FormControl의 차이점은 무엇입니까?

내가 사용하고 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에 컨트롤 그룹이 포함 된 것처럼 profileForm FormGroup은 FormGroup 지시문 을 사용하여 양식 요소에 바인딩되어 모델과 입력이 포함 된 양식 사이에 통신 계층을 생성합니다. formControlName의해 제공된 입력 FormControlName지시문에 정의 된 형태로 각각의 제어 입력을 결합FormGroup

당신이 구독하고 사용할 수있는를 반환하는 (지금 당장 이걸 알고 있고, 아마 그 이상이있을 [formControl]수 있습니다) FormControl라는 속성이 있기 때문에 당신 과 함께 반응 프로그래밍 이점 을 사용할 수 있습니다. (예를 들어 사용자가 값을 변경하자마자 입력 이메일이 반복되지 않도록 확인하고자하는 등록 시나리오에 매우 유용합니다.)valueChangesObservable