web-dev-qa-db-ja.com

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>
angularangular2-formsangular2-formbuilder
54
user2363245

エラーメッセージの答えは正解です。スタンドアロンであることを示す必要があります。したがって、フォームコントロールと競合しません。

[ngModelOptions]="{standalone: true}"
102
Avenir Çokaj

@AvenirÇokajの回答を拡大

初心者であっても、最初はエラーメッセージを明確に理解していませんでした。

エラーメッセージが示すのは、formGroupに、formControlで考慮されない要素があることです。 （意図的/偶然）

このフィールドを検証せずに、この入力要素でngModelを使用したい場合は、上記の@Avenirで述べたように、検証を必要としないスタンドアロンコンポーネントであることを示すフラグを追加してください。

22
saNiks

OK、ついに機能しました： https://github.com/angular/angular/pull/10314#issuecomment-24221856

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

10
user2363245

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

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

それでもエラーが続く場合は、すべてのobject（myObject）フィールドにフォームコントロールを設定しようとします。

開始<form> </form>の例：<form [formGroup]="myForm" (ngSubmit)="submitForm(myForm.value)"> set form control for all input field </form>.

8
ethemsulan
import { FormControl, FormGroup, AbstractControl, FormBuilder, Validators } from '@angular/forms';


    this.userInfoForm = new FormGroup({
      userInfoUserName: new FormControl({ value: '' }, Validators.compose([Validators.required])),
      userInfoName: new FormControl({ value: '' }, Validators.compose([Validators.required])),
      userInfoSurName: new FormControl({ value: '' }, Validators.compose([Validators.required]))
    });
<form [formGroup]="userInfoForm" class="form-horizontal">
            <div class="form-group">
                <label class="control-label"><i>*</i> User Name</label>
                    <input type="text" formControlName="userInfoUserName" class="form-control" [(ngModel)]="userInfo.userName">
            </div>
            <div class="form-group">
                <label class="control-label"><i>*</i> Name</label>
                    <input type="text" formControlName="userInfoName" class="form-control" [(ngModel)]="userInfo.name">
            </div>
            <div class="form-group">
                <label class="control-label"><i>*</i> Surname</label>
                    <input type="text" formControlName="userInfoSurName" class="form-control" [(ngModel)]="userInfo.surName">
            </div>
</form>
2
barış çıracı

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

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

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

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

1
Rust

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

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

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

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

1
Stephen Paul

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

例：

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

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

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

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