ngModel không thể được sử dụng để đăng ký các điều khiển biểu mẫu với chỉ thị formGroup mẹ

Sau khi nâng cấp lên RC5, chúng tôi bắt đầu gặp lỗi này:

ngModel cannot be used to register form controls with a parent formGroup 
 directive.
Try using formGroup's partner directive "formControlName" instead.  Example:

    <div [formGroup]="myGroup">
      <input formControlName="firstName">
    </div>

    In your class:

    this.myGroup = new FormGroup({
       firstName: new FormControl()
    });

      Or, if you'd like to avoid registering this form control,
 indicate that it's standalone in ngModelOptions:

      Example:

      
  <div [formGroup]="myGroup">
     <input formControlName="firstName">
     <input [(ngModel)]="showMoreControls" [ngModelOptions]="{standalone: true}">
  </div>

Có vẻ như trong RC5, cả hai không còn được sử dụng cùng nhau nữa, nhưng tôi không thể tìm thấy giải pháp thay thế.

Đây là thành phần tạo ra ngoại lệ:

    <select class="field form-control" [formGroup]="form" [(ngModel)]="cause.id" [name]="name">
    <option *ngFor="let c of causes" [value]="c.text">{{c.text}}</option>
    </select>

Câu trả lời nằm ngay trên thông báo lỗi, bạn cần chỉ ra rằng nó độc lập và do đó nó không xung đột với các điều khiển biểu mẫu:

[ngModelOptions]="{standalone: true}"

Mở rộng câu trả lời của @Avenir Çokaj

Là một người mới, ngay cả lúc đầu tôi cũng không hiểu rõ ràng về thông báo lỗi.

Thông báo lỗi chỉ ra rằng trong formGroup của bạn, bạn có một phần tử không được tính đến trong formControl của bạn. (Cố ý / Vô tình)

Nếu bạn có ý định không xác thực trường này nhưng vẫn muốn sử dụng ngModel trên phần tử đầu vào này, vui lòng thêm cờ để cho biết đó là một thành phần độc lập không cần xác thực như đã đề cập bởi @Avenir ở trên.

OK, cuối cùng thì nó cũng hoạt động: xem https://github.com/angular/angular/pull/10314#issuecomment-242218563

Tóm lại, bạn có thể sử dụng không còn namethuộc tính trong vòng một formGroup, và phải sử dụng formControlNamethay vì

khi bạn viết formcontrolname Angular 2 không chấp nhận. Bạn phải viết formControlName . nó là về các từ thứ hai viết hoa.

<input type="number" [(ngModel)]="myObject.name" formcontrolname="nameFormControl"/>

nếu lỗi vẫn xảy ra, hãy thử đặt điều khiển biểu mẫu cho tất cả trường đối tượng (myObject).

giữa bắt đầu <form> </form>ví dụ:<form [formGroup]="myForm" (ngSubmit)="submitForm(myForm.value)"> set form control for all input field </form>.

Nếu thành phần có nhiều hơn 1 biểu mẫu, hãy đăng ký tất cả các điều khiển và biểu mẫu

Tôi cần biết tại sao điều này lại xảy ra trong một thành phần nhất định mà không phải trong bất kỳ thành phần nào khác.

Vấn đề là tôi đã có 2 biểu mẫu trong một thành phần và biểu mẫu thứ hai chưa có [formGroup]và chưa được đăng ký vì tôi vẫn đang xây dựng biểu mẫu.

Tôi đã tiếp tục và hoàn thành việc ghi cả hai biểu mẫu hoàn chỉnh mà không để lại đầu vào không được đăng ký để giải quyết vấn đề.

Tôi chỉ gặp lỗi này vì tôi không đặt tất cả các điều khiển biểu mẫu của mình trong divmột formGroupthuộc tính với một thuộc tính.

Ví dụ, điều này sẽ tạo ra một lỗi

<div [formGroup]='formGroup'>
</div>
<input formControlName='userName' />

Điều này có thể khá dễ dàng để bỏ lỡ nếu nó là một dạng đặc biệt dài.

Nếu bạn muốn sử dụng [formGroup]với formControlName, bạn phải thay thế namethuộc tính bằng formControlNameformControlName.

Thí dụ:

Điều này không hoạt động vì nó sử dụng thuộc tính [formGroup]và name.

<div [formGroup]="myGroup">
   <input name="firstName" [(ngModel)]="firstName">
</div>

Bạn nên thay thế namethuộc tính bằng formControlNamevà nó sẽ hoạt động tốt như sau:

<div [formGroup]="myGroup">
   <input formControlName="firstName" [(ngModel)]="firstName">
</div>

Có vẻ như bạn đang sử dụng ngModel trên cùng một trường biểu mẫu với formControlName. Hỗ trợ sử dụng thuộc tính đầu vào ngModel và sự kiện ngModelChange với các lệnh biểu mẫu phản ứng đã không được chấp nhận trong Angular v6 và sẽ bị loại bỏ trong Angular v7

Lỗi này xuất hiện khi bạn có một số điều khiển biểu mẫu (như Đầu vào, Lựa chọn, v.v.) trong thẻ nhóm biểu mẫu của bạn không có thuộc tính formControlName.

Những ví dụ đó dẫn đến lỗi:

<form [formGroup]="myform">
    <input type="text">
    <input type="text" [ngmodel]="nameProperty">
    <input type="text" [formGroup]="myform" [name]="name">
</fom>

Có hai cách, độc lập:

<form [formGroup]="myform">
    <input type="text" [ngModelOptions]="{standalone: true}">
    <input type="text" [ngmodel]="nameProperty" [ngModelOptions]="{standalone: true}">
    <!-- input type="text" [formGroup]="myform" [name]="name" --> <!-- no works with standalone --
</form>

Hoặc bao gồm nó vào nhóm biểu mẫu

<form [formGroup]="myform">
    <input type="text" formControlName="field1">
    <input type="text" formControlName="nameProperty">
    <input type="text" formControlName="name">
</fom>

Câu cuối cùng ngụ ý xác định chúng trong formGroup khởi tạo

this.myForm =  new FormGroup({
    field1: new FormControl(''),
    nameProperty: new FormControl(''),
    name: new FormControl('')
});