ngModel не можна використовувати для реєстрації елементів керування формою з батьківською директивою formGroup

Після оновлення до RC5 ми почали отримувати таку помилку:

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>

Схоже, у RC5 їх більше не можна використовувати разом, але я не міг знайти альтернативного рішення.

Ось компонент, що створює виняток:

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

Відповідь прямо на повідомлення про помилку, вам потрібно вказати, що воно автономне, і тому воно не суперечить елементам керування формою:

[ngModelOptions]="{standalone: true}"

Розгортається відповідь @Avenir Çokaj

Будучи початківцем, навіть я спочатку не зрозумів повідомлення про помилку.

Повідомлення про помилку вказує на те, що у вашій formGroup у вас є елемент, який не враховується у вашому formControl. (Навмисно / випадково)

Якщо ви маєте намір не перевіряти це поле, але все ж хочете використовувати ngModel для цього елемента введення, додайте прапор, щоб вказати, що це автономний компонент без необхідності перевірки, як зазначено вище @Avenir.

Добре, нарешті все запрацювало: див. Https://github.com/angular/angular/pull/10314#issuecomment-242218563

Коротше кажучи, ви більше не можете використовувати nameатрибут всередині formGroup, а formControlNameнатомість його потрібно використовувати

при написанні формиcontrolname Angular 2 не приймають. Ви повинні написати formControlName . йдеться про великі другі слова.

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

якщо помилка все-таки conitnue, спробуйте встановити контроль форми для всього поля об'єкта (myObject).

наприклад, між початком <form> </form>:<form [formGroup]="myForm" (ngSubmit)="submitForm(myForm.value)"> set form control for all input field </form>.

Якщо компонент має більше 1 форми, зареєструйте всі елементи керування та форми

Мені потрібно було знати, чому це відбувається в певному компоненті, а не в будь-якому іншому.

Проблема полягала в тому, що я мав 2 форми в одному компоненті, а друга форма ще не мала [formGroup]і ще не була зареєстрована, оскільки я все ще будував форми.

Я продовжив і заповнив написання обох форм у повному обсязі, не залишивши вводу незареєстрованим, який вирішує проблему.

Я щойно отримав цю помилку, оскільки не вклав усі свої елементи керування формою divв formGroupатрибут.

Наприклад, це призведе до помилки

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

Це може бути досить легко пропустити, якщо це особливо довга форма.

Якщо ви хочете використовувати [formGroup]з formControlName, ви повинні замінити nameатрибут на formControlNameformControlName.

Приклад:

Це не працює, оскільки використовується атрибут [formGroup]and name.

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

Ви повинні замінити nameатрибут на, formControlNameі він буде працювати нормально, як показано нижче:

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

Схоже, ви використовуєте ngModel у тому самому полі форми, що і formControlName. Підтримка використання властивості введення ngModel та події ngModelChange з директивами реактивної форми застаріла в Angular v6 і буде видалена в Angular v7

Ця помилка з'являється, коли у вас є деякі елементи керування формою (наприклад, входи, виділення тощо) у тегах групи форм без властивості formControlName.

Ці приклади видають помилку:

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

Є два шляхи, самостійні:

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

Або включити його до групи форм

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

Останній передбачає їх визначення у формі ініціалізації Group

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