[解決済み] Angular 2 formArraysに指定されていないname属性を持つコントロールが見つからない
2022-03-03 06:36:02
質問
コンポーネントでformArrayを反復処理しようとしていますが、以下のエラーが発生します。
Error: Cannot find control with unspecified name attribute
このロジックは、私のクラスファイルでは次のようになります。
export class AreasFormComponent implements OnInit {
public initialState: any;
public areasForm: FormGroup;
constructor(private fb: FormBuilder) { }
private area(): any {
return this.fb.group({
name: ['', [Validators.required]],
latLong: ['', [Validators.required]],
details: ['', [Validators.required]]
});
}
public ngOnInit(): void {
this.areasForm = this.fb.group({
name: ['', [Validators.required]],
areas: this.fb.array([this.area()])
});
}
}
そして私のテンプレートファイル
<form class="areas-form" [formGroup]="areasForm" (ngSubmit)="onSubmit(areasForm.values)">
<md-input-container class="full-width">
<input mdInput placeholder="Location Name" type="text" formControlName="name" required>
<md-error *ngIf="areasForm.get('name').hasError('required')">Please enter the locationName</md-error>
</md-input-container>
<md-grid-list cols="1" [formArrayName]="areas">
<md-grid-tile formGroupName="i" colspan="1" rowHeight="62px" *ngFor="let area of areasForm.controls.areas.controls; let i = index ">
<md-grid-list cols="3" rowHeight="60px">
<md-grid-tile colspan="1">
<md-input-container class="full-width">
<input mdInput placeholder="Area Name" type="text" formControlName="name" required>
<md-error *ngIf="areasForm.get('areas').controls[i].name.hasError('required')">Please enter the area name</md-error>
</md-input-container>
</md-grid-tile>
<md-grid-tile colspan="1">
<md-input-container class="full-width">
<input mdInput placeholder="details" type="text" formControlName="details" required>
<md-error *ngIf="areasForm.get('areas').controls[i].name.hasError('required')">Please enter the locationName</md-error>
</md-input-container>
</md-grid-tile>
<md-grid-tile colspan="1">
<button md-fab (click)="remove(i)"><md-icon>subtract</md-icon>Remove Area</button>
</md-grid-tile>
</md-grid-list>
</md-grid-tile>
</md-grid-list>
<button type="submit" [disabled]="areasForm.invalid" md-raised-button color="primary">Submit</button>
</form>
解決方法は?
の括弧を削除します。
[formArrayName]="areas"
のみを使用します。
formArrayName="areas"
この、なぜなら
[ ]
をバインドしようとしています。
変数
これはそうではありません。また、送信にも注意してください。
(ngSubmit)="onSubmit(areasForm.value)"
の代わりに
areasForm.values
.
関連
-
[解決済み】ERROR エラーです。スイッチのname属性が指定されていないフォームコントロールの値アクセッサがない
-
[解決済み] MIPSで階乗を行うコードはどのように書くのですか?
-
[解決済み] Rustで範囲指定はどうやるの?
-
[解決済み] Angular:*ngClassを使った条件付きクラス
-
[解決済み] モジュール "@angular-devkit/build-angular" が見つかりませんでした。
-
[解決済み] インデックスを属性値とするngFor
-
[解決済み] マップの全キーに対する反復処理
-
[解決済み】整数の範囲内で反復処理する方法はありますか?
-
[解決済み】AngularとTypescript。名前を見つけることができない - エラー:名前を見つけることができません。
-
[解決済み】Angular 2 Unit Tests。名前 'describe' が見つからない
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み】Angular 2 formArraysでname属性が指定されていないコントロールが見つからない。
-
[解決済み] フローチャートでネストしたforループを表示する
-
[解決済み] MIPSで階乗を行うコードはどのように書くのですか?
-
[解決済み] GAMSでマクロ/ループを作成する
-
[解決済み] AutoHotKeyのホットキーでSetTimerをオフに切り替えるには?
-
[解決済み] Rustで範囲指定はどうやるの?
-
[解決済み] Angular 2 formArraysに指定されていないname属性を持つコントロールが見つからない
-
[解決済み] マップの全キーに対する反復処理
-
[解決済み】整数の範囲内で反復処理する方法はありますか?
-
[解決済み] Kotlin の `forEach` における `break` と `continue` について