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

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

사용 중ReactiveFormsModule양식을 포함하는 구성요소를 만듭니다.내 코드는 다음과 같습니다.

foo.component.ts:

constructor(fb: FormBuilder) {
    this.myForm = fb.group({
        'fullname': ['', Validators.required],
        'gender': []
    });
}

foo.component.component(포함)[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.component(포함)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폼 모듈에 이름별로 컨트롤을 조회하는 문자열을 할당합니다.

컨트롤에 대한 변수를 생성하는 경우 다음과 같은 변수도 필요하지 않습니다..해리가 언급한 것처럼, 하지만 저는 또한 사용할 것을 제안합니다.[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로 선언해야 합니다.

내 구성요소.ts

firstName: AbstractControl
lastName: AbstractControl
email: AbstractControl
title: AbstractControl

그러나 AbstractControls를 선언하는 것은 권장되지 않으므로 오류가 발생할 경우Cannot find control with unspecified name attribute그러면 스타일을 혼합했거나 컨트롤을 추상 컨트롤로 선언했을 수 있습니다.

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컨트롤 그룹인 프로파일 양식을 포함합니다.FormGroup를 사용하여 폼 요소에 바인딩됩니다.FormGroup지시, 모델과 입력을 포함하는 양식 사이에 통신 레이어를 만듭니다.그formControlName에서 제공한 입력FormControlName지시는 각 개별 입력을 정의된 양식 제어에 바인딩합니다.FormGroup

와 함께[formControl]반응형 프로그래밍의 장점을 사용할 수 있습니다.FormControl이름이 지정된 속성이 있습니다.valueChanges(나는 지금 이것을 알고 있다, 아마도 그 이상이 있을 것이다) 그것은 반환합니다.Observable구독하고 사용할 수 있습니다. (예를 들어, 사용자가 값을 변경하는 즉시 입력 전자 메일이 반복되지 않도록 확인하려는 등록 시나리오에서 매우 유용합니다.)

언급URL : https://stackoverflow.com/questions/40171914/what-is-the-difference-between-formcontrolname-and-formcontrol