Sự khác biệt giữa formControlName và FormControl là gì?

Tôi đang sử dụng ReactiveFormsModuleAngular2 để tạo một thành phần có chứa biểu mẫu. Đây là mã của tôi:

foo.component.ts :

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

foo.component.html (với [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 (với 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>

Cả hai cách đều hoạt động. Nhưng tôi không thể tìm ra sự khác biệt giữa việc sử dụng [formControl]và formControlName.

Tôi tin rằng bạn đã bỏ lỡ một điểm quan trọng: [formGroup]chỉ thị trong ví dụ thứ hai. formControlNameđược sử dụng cùng với [formGroup]để lưu biểu mẫu của bạn điều hướng nhiều dấu chấm. Ví dụ:

<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>

Tương đương với:

<div [formGroup]="myForm">
  <input type="text" formControlName="firstName"/>
  <input type="text" formControlName="lastName"/>
  <input type="text" formControlName="email"/>
  <input type="text" formControlName="title"/>
</div>

Bây giờ hãy tưởng tượng lồng nhau FormGroups:)

[formControl]gán một tham chiếu đến FormControlphiên bản bạn đã tạo cho FormControlDirective.

formControlName gán một chuỗi cho mô-đun biểu mẫu để tra cứu điều khiển theo tên.

Nếu bạn tạo các biến cho các điều khiển, bạn cũng không cần .như Harry đã đề cập, nhưng tôi cũng khuyên bạn nên sử dụng [formGroup]thay thế vì với các dạng phức tạp hơn, điều này có thể trở nên lộn xộn.

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

Có sự tương đương thứ 3 với hai điều được cung cấp trong câu trả lời được chấp nhận, điều này (không được khuyến nghị):

<div [formGroup]="myForm">
  <input type="text" [formControl]="firstName"/>
  <input type="text" [formControl]="lastName"/>
  <input type="text" [formControl]="email"/>
  <input type="text" [formControl]="title"/>
</div>

Lưu ý rằng chúng tôi vẫn đang sử dụng chỉ thị [formGroup].

Tuy nhiên, để mẫu này biên dịch mà không bị lỗi, thì thành phần của bạn cần phải khai báo các điều khiển là AbstractControls chứ không phải FormControls:

myComponent.ts

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

Tuy nhiên, xin lưu ý rằng việc khai báo AbstractControls không được khuyến khích , vì vậy nếu bạn gặp lỗi Cannot find control with unspecified name attributethì có thể bạn đã trộn các kiểu hoặc đã khai báo các điều khiển của mình là AbstractControls.

Từ tài liệu Angular ( https://angular.io/guide/reactive-forms ):

Thành phần

@Component({
  ...
})
export class ProfileEditorComponent {
  profileForm = new FormGroup({
    firstName: new FormControl(''),
    lastName: new FormControl(''),
  });
}

Bản mẫu

<form [formGroup]="profileForm">

  <label>
    First Name:
    <input type="text" formControlName="firstName">
  </label>

  <label>
    Last Name:
    <input type="text" formControlName="lastName">
  </label>

</form>

Lưu ý rằng cũng giống như FormGroupchứa một nhóm điều khiển, profileForm FormGroupđược liên kết với phần tử biểu mẫu bằng FormGroup chỉ thị, tạo ra một lớp giao tiếp giữa mô hình và biểu mẫu chứa các đầu vào. Đầu formControlNamevào được cung cấp bởi FormControlNamechỉ thị liên kết từng đầu vào riêng lẻ với điều khiển biểu mẫu được xác định trongFormGroup

với việc [formControl]bạn có thể sử dụng các ưu điểm của lập trình Reactive vì FormControlcó một thuộc tính được đặt tên valueChanges(tôi biết cái này ngay bây giờ, có thể còn nhiều hơn thế) trả về một thuộc tính Observablemà bạn có thể đăng ký và sử dụng nó. (ví dụ, nó rất hữu ích trong các trường hợp đăng ký mà bạn muốn kiểm tra email đầu vào để không bị lặp lại ngay khi người dùng thay đổi giá trị)