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では、この2つを一緒に使用することはできなくなったようですが、別の解決策を見つけることができませんでした。

例外を生成するコンポーネントは次のとおりです。

    <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で説明したように、検証の必要がないスタンドアロンコンポーネントであることを示すフラグを追加してください。

OK、ついに動作しました：https：//github.com/angular/angular/pull/10314#issuecomment-242218563を参照してください

簡単に言うと、name内で属性を使用できなくなりformGroup、formControlName代わりに使用する必要があります

formcontrolnameを書くとき、Angular2は受け入れません。formControlNameを記述する必要があります。それは大文字の2番目の単語についてです。

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

それでもエラーが続く場合は、すべてのオブジェクト（myObject）フィールドにフォームコントロールを設定してみてください。

<form> </form>たとえば、開始と開始の間：<form [formGroup]="myForm" (ngSubmit)="submitForm(myForm.value)"> set form control for all input field </form>.

コンポーネントに複数のフォームがある場合は、すべてのコントロールとフォームを登録します

これが特定のコンポーネントで発生し、他のコンポーネントでは発生しなかった理由を知る必要がありました。

問題は、1つのコンポーネントに2つのフォームがあり、2番目のフォームはまだフォームを作成していたため[formGroup]、まだ登録されていないことでした。

私は先に進み、問題を解決する入力を登録せずに、両方のフォームを完成させました。

すべてのフォームコントロールを属性で囲んでいないため、このエラーが発生divしましたformGroup。

たとえば、これはエラーをスローします

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

これは、特に長い形式の場合、見逃しがちです。

で使用[formGroup]するformControlName場合は、name属性をformControlNameformControlName。に置き換える必要があります。

例：

[formGroup]andname属性を使用しているため、これは機能しません。

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

name属性をに置き換える必要があります。formControlName次のように正常に機能します。

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

formControlNameと同じフォームフィールドでngModelを使用しているようです。リアクティブフォームディレクティブでのngModel入力プロパティとngModelChangeイベントの使用のサポートは、Angular v6で非推奨になり、Angularv7で削除されます。

このエラーは、formControlNameプロパティのないフォームグループタグにいくつかのフォームコントロール（入力、選択など）がある場合に表示されます。

これらの例はエラーをスローします：

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

スタンドアロンの2つの方法があります。

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

最後のものは、初期化フォームグループでそれらを定義することを意味します

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