web-dev-qa-db-ja.com

プロパティ「controls」はタイプ「AbstractControl」に存在しません-angular4

このエラーについてはすでに多数のブログが投稿されていますが、angular4については何も指定されていません。

フォームに動的コントロールを追加および削除しています

初期化中にフォームにコントロールを追加します

ngOnInit() {

    this.lienHolder = this._fb.group({
      emailAddress: ['', [Validators.required, Validators.email]],
      policyDetails: this._fb.array([
        this.initPolicyTemplate(),
      ])
    });

  }

 initPolicyTemplate() {
    return this._fb.group({
      policyNumber: ['', [Validators.required, Validators.pattern("(^[^0][A-Z]{1}[0-9]*$)")]],
      vinNumber: ['', [Validators.required, Validators.pattern('^[0-9]{6}$')]],
    });
  }

このメソッドを呼び出すことでさらに制御を追加します

 addPolicyTemplate() {
    const control = <FormArray>this.lienHolder.controls['policyDetails'];
    control.Push(this.initPolicyTemplate());
  }

フォームからコントロールを削除する

  removePolicyTemplate(i: number) {  
    const control = <FormArray>this.lienHolder.controls['policyDetails'];
    control.removeAt(i);
  }

コードをビルドすると、次のようなエラーが発生します

enter image description here

これは私のhtmlです

  <div formArrayName="policyDetails">
        <div *ngFor="let _policy of lienHolder.controls.policyDetails.controls; let i=index">
          <div class="panel panel-default">
            <div class="panel-head">
              <div class="glyphicon glyphicon-remove pull-right" *ngIf="lienHolder.controls.policyDetails.controls.length > 1" (click)="removePolicyTemplate(i)"></div>
            </div>
            <div class="panel-body">
              <div [formGroupName]="i">
                <address [policyGroup]="lienHolder.controls.policyDetails.controls[i]"></address>
              </div>
            </div>
          </div>
        </div>
      </div>

この問題を解決できません。私は this ブログをフォローして動的コントロールを考え出しました

更新1

私が.tsコードをこのように変更したとき

get DynamicFormControls() {

    return <FormArray>this.lienHolder.get('policyDetails');
  }

そして、このようなHTMLコード

 <div formArrayName="policyDetails">
        <div *ngFor="let _policy of DynamicFormControls.controls ; let i=index" style="position: relative">
          <add-policy-details [policyGroup]="lienHolder.controls.policyDetails.controls[i]"></add-policy-details>
          <div class="remove-btn" (click)="removePolicyTemplate(i)" *ngIf="lienHolder.controls.policyDetails.controls.length > 1">
          </div>
        </div>
      </div>

それは働いていました、そして私はコマンドを使用してプロダクションモードでファイルをコンパイルすることができました

ng build --target = production --environment = prod

しかし、過去数日間、同じエラーが発生し、プロダクションモードでコンパイルできないため、アプリケーションを更新していません

ノードのバージョン-v6.11.1

npmバージョン-3.10.10

角度バージョン-4.0

正確にエラーの原因を知らない。

angularangular4-forms
8
Lijin Durairaj

深く掘り下げた後、解決策が見つかりました here 。本番環境のビルドを実行しているときは、コンポーネントにgetメソッドを指定することで問題を修正する必要があります。

get formData() { return <FormArray>this.lienHolder.get('policyDetails'); }

そしてあなたのテンプレートで：

<div *ngFor="let _policy of formData.controls ; let i=index">

これがあなたのためにうまくいくことを願っています

18
Vikhyath Maiya

私もng buildで同じ問題に直面しましたが、単に[]で修正されました。

*ngFor="let _policy of DynamicFormControls['controls'] ; let i=index"

下の行の代わりに上の行を使用してください

 *ngFor="let _policy of DynamicFormControls.controls ; let i=index"
12
Muthamizhchelvan. V
getArrayControls() {
    return (<FormArray>this.sampleForm.get('formArr')).controls;
  }

<div *ngFor="let elem of getArrayControls(); let i = index" [formGroupName]="i">
  <input formControlName="sampleElementOfArr">
</div>

更新：

'<>'構文を使用した型アサーションは禁止されています。代わりに「as」構文を使用してください

getArrayControls() {
    return (this.sampleForm.get('formArr') as FormArray).controls;
}

の詳細を読むFormArray を使用してフォームフィールドを動的に作成する

3
Eliaquim Garcia

私の場合の問題は、関数の戻り値の型をFormArrayと述べたことです。戻り値の型を削除したところ、ゲッターメソッドは次のようになります。

 get eventExtraDetailsArray(){
    return this.addEventExtraForm.get('regDetails') as FormArray;
  }

hTMLでコードを次のように変更しました

<div formArrayName="regDetails">
          <div *ngFor="let eventCharge of addEventExtraForm['controls'].regDetails['controls']; let regIdx = index"
            [formGroupName]="regIdx">
 </div>
</div>

これで本番ビルドは正常に動作します。

2
Dan Patil

FormGroupにはcontrolsという名前のファイルが含まれていますが、それは奇妙なバグです
しかし、これを試すことができます：
ループ内：
<div *ngFor="let _policy of formData['controls'] ; let i=index">

特定のコントロールを取得したい場合：

<div *ngIf="form.get('myCntrol').touched && form.get('myCntrol').errors"></div>
2
SlimenTN

角括弧[]および単一引用符['controls']この場合、問題を修正する必要があります。また、controlsを2回以上繰り返す必要がある場合。 JavaScriptプロパティアクセス：ドット表記と角かっこ 。

これは私にとってはうまくいきませんでした：

let brand of productsForm.controls.brands.controls; ...

それを次のように変更します。

let brand of productsForm['controls'].brands['controls']; ...

エラーを削除しました。

角括弧表記により、特殊文字を含むプロパティへのアクセス、および変数を使用したプロパティの選択が可能

1
k.vincent

この問題は github で解決されています。最も簡単な方法は、* ngForでyourFormArray.controlsの代わりにyourFormArray ['controls']を使用することです。または、getアクセサーがある場合は、それを使用してコントロールにアクセスできます。

0
Anand Bhushan