web-dev-qa-db-ja.com

プロパティ 'controls'はタイプ 'AbstractControl'に存在しませんAngular 4

Angular 4.でネストされたリアクティブフォームを試しています。それはうまく機能していますが、AOTを構築しようとするとエラーがスローされます

「コントロール」はタイプ「AbstractControl」に存在しません

私はグーグルで試してみましたが、運はほとんどありませんでした。誰もこの問題を修正する方法を教えてもらえますか？

<div [formGroup]="myForm">
    <div formArrayName="addresses">
        <div *ngFor="let address of myForm.get('addresses').controls; let i=index" 
                    class="panel panel-default">
            <span *ngIf="myForm.get('addresses').length > 1"
                    (click)="removeAddress(i)">Remove</span>
            <div [formGroupName]="i">
                <mat-form-field>
                    <input matInput formControlName="city" placeholder="city" value="">
                </mat-form-field>
            </div>

        </div>
    </div>
    <a (click)="addAddress()" style="cursor: default"> Add +</a>
</div>

以下のTypeScriptコード

constructor(private _fb: FormBuilder) {     
}

ngOnInit() {
    this.myForm = this._fb.group({
        addresses: this._fb.array([
            this.initAddress(),
        ])
    });
}
initAddress() {
    return this._fb.group({
        city: ['']
    });
}
addAddress() {
    const control = <FormArray>this.myForm.get('addresses');
    control.Push(this.initAddress());
}
removeAddress(i: number) {
    const control = <FormArray>this.myForm.get('addresses');
    control.removeAt(i);
}
angulartypescriptangular2-formsangular4-forms
23
Munna Babu

@GünterZöchbauerのコメントに基づいて、最初に私が変更しました

_myForm.controls['addresses']_からmyForm.get('addresses')へhtmlとTypeScriptの両方で

そして、@ yuruziコメントに基づいて

myForm.get('addresses').controlsをmyForm.get('addresses')['controls']に変更しました

現在は正常に動作しています。ありがとう@gunter＆yuruzi

60
Munna Babu

ただし、簡単に修正できます。 「コントロールの取得」ロジックをコンポーネントコードのメソッドにアウトソースします（.tsファイル）：

`getControls() {
  return (this.recipeForm.get('controlName') as FormArray).controls;
}`

テンプレートでは、次を使用できます。

*ngFor="let ingredientCtrl of getControls(); let i = index"

この調整は、TSの動作方法とAngularがテンプレートを解析するために必要です（TSがそこに理解されていません）。

8
sunny kashyap

@sunny kashyapソリューションの更新として、次のように記述します。

getControls() {
  return (this.recipeForm.get('controlName') as FormArray).controls;
}
1
Motasem Halawani

検証エラーの使用...

<span *ngIf="f.YOUR_FORM_KEY.controls.YOUR_FORM_KEY.errors?.YOUR_FORM_VALIDATION">YOUR_FORM_KEY is YOUR_FORM_VALIDATION</span>

例えば。

<span *ngIf="f.name.controls.name.errors?.required">Name is required</span>

tsファイル

get f(): any {
    return this.userForm.controls;
}
0
Mhar Daniel

FormArrayの長さを取得するには、単にlengthを使用します。

<span *ngIf="myForm.controls['addresses'].length > 1" (click)="removeAddress(i)">Remove</span>

それが役に立てば幸い

0
Mohamed Ali RACHID

myForm.get('addresses').controlsをmyForm.get('addresses').valueに変更すると、問題も修正されます。

0
Advait Baxi