[解決済み] AngularでFormArrayからすべての項目を削除する
2022-05-14 13:18:26
質問
フォームビルダーの中にフォームの配列があり、クリックするとアプリケーション1からデータが読み込まれるなど、動的にフォームを変更しています。
私が抱えている問題は、すべてのデータがロードされますが、FormArray内のデータはそのままで、古い項目と新しい項目が連結されるだけです。
FormArray を新しい項目だけにするにはどうしたらよいでしょうか。
私はこれを試してみました
const control2 = <FormArray>this.registerForm.controls['other_Partners'];
control2.setValue([]);
と書いても、うまくいきません。
何かいい方法はないでしょうか?
ngOnInit(): void {
this.route.params.subscribe(params => {
if (params['id']) {
this.id = Number.parseInt(params['id']);
} else { this.id = null;}
});
if (this.id != null && this.id != NaN) {
alert(this.id);
this.editApplication();
this.getApplication(this.id);
} else {
this.newApplication();
}
}
onSelect(Editedapplication: Application) {
this.router.navigate(['/apply', Editedapplication.id]);
}
editApplication() {
this.registerForm = this.formBuilder.group({
id: null,
type_of_proposal: ['', Validators.required],
title: ['', [Validators.required, Validators.minLength(5)]],
lead_teaching_fellow: ['', [Validators.required, Validators.minLength(5)]],
description: ['', [Validators.required, Validators.minLength(5)]],
status: '',
userID: JSON.parse(localStorage.getItem('currentUser')).username,
contactEmail: JSON.parse(localStorage.getItem('currentUser')).email,
forename: JSON.parse(localStorage.getItem('currentUser')).firstname,
surname: JSON.parse(localStorage.getItem('currentUser')).surname,
line_manager_discussion: true,
document_url: '',
keywords: ['', [Validators.required, Validators.minLength(5)]],
financial_Details: this.formBuilder.group({
id: null,
buying_expertise_description: ['', [Validators.required, Validators.minLength(2)]],
buying_expertise_cost: ['', [Validators.required]],
buying_out_teaching_fellow_cost: ['', [Validators.required]],
buying_out_teaching_fellow_desc: ['', [Validators.required, Validators.minLength(2)]],
travel_desc: ['', [Validators.required, Validators.minLength(2)]],
travel_cost: ['', [Validators.required]],
conference_details_desc: ['', [Validators.required, Validators.minLength(2)]],
conference_details_cost: ['', [Validators.required]],
}),
partners: this.formBuilder.array([
//this.initEditPartner(),
//this.initEditPartner()
// this.initMultiplePartners(1)
]
),
other_Partners: this.formBuilder.array([
//this.initEditOther_Partners(),
])
});
}
getApplication(id) {
this.applicationService.getAppById(id, JSON.parse(localStorage.getItem('currentUser')).username)
.subscribe(Response => {
if (Response.json() == false) {
this.router.navigateByUrl('/');
} else {
this.application = Response.json();
for (var i = 0; i < this.application.partners.length;i++) {
this.addPartner();
}
for (var i = 0; i < this.application.other_Partners.length; i++) {
this.addOther_Partner();
}
this.getDisabledStatus(Response.json().status);
(<FormGroup>this.registerForm) .setValue(Response.json(), { onlySelf: true });
}
});
}
ngOnInitはクリック時に呼び出されません。
どのように解決するのですか?
私も同じ問題を抱えていました。この問題を解決するには、2つの方法があります。
サブスクリプションを保持する
FormArrayの各要素を手動で消去する場合は
removeAt(i)
関数をループで呼び出すことで、手動でFormArrayの各要素をクリアすることができます。
clearFormArray = (formArray: FormArray) => {
while (formArray.length !== 0) {
formArray.removeAt(0)
}
}
この手法の利点は、あなたの
formArray
で登録されたようなformArray.valueChanges
で登録されたものは失われません。
をご覧ください。 FormArray ドキュメント を参照してください。
よりクリーンな方法(ただし、サブスクリプションの参照は壊れる)
FormArray全体を新しいものに置き換えることができます。
clearFormArray = (formArray: FormArray) => {
formArray = this.formBuilder.array([]);
}
この方法は、もしあなたがサブスクライブしているのが
formArray.valueChanges
observable を購読している場合、問題が発生します! もしFromArrayを新しい配列に置き換えたら、購読しているobservableへの参照を失うことになります。
関連
-
[解決済み] Angular HTMLバインディング
-
[解決済み] Angular:*ngClassを使った条件付きクラス
-
[解決済み] Angular/RxJS `Subscription` からいつ退会すればいいのか?
-
[解決済み] モジュール "@angular-devkit/build-angular" が見つかりませんでした。
-
[解決済み] Angularで@Input()の値が変更されたときに検出する方法は?
-
[解決済み] Angularプロジェクトごとに生成される膨大な数のファイル
-
[解決済み] Angularの@Directiveと@Componentの比較
-
[解決済み] Angularフォームフィールドを手動で無効に設定するにはどうすればよいですか?
-
[解決済み】Angularでルート変更を検出する方法は?
-
[解決済み] AngularでFormArrayからすべての項目を削除する
最新
-
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 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み] ng buildの後にangular-cliのdist-folderのパスを変更するには?
-
[解決済み] Angular 2におけるEventEmitter.next()とEventEmitter.emit()の相違点
-
[解決済み] コンポーネントクラスからテンプレート参照変数にアクセスする
-
[解決済み] Angularで、コントロールが作成された後、FormControlにバリデータを追加する方法は?
-
[解決済み] Angular / Angular Materialでmat-horizontal-stepperのステップをプログラムで移動させることは可能ですか?
-
[解決済み] Angular v5からAngular v6にプロジェクトをアップグレードしたい。
-
[解決済み] 文字列|ヌル'型の引数は、文字列'型のパラメータに代入できません。タイプ 'null' はタイプ 'string' に割り当てられません。
-
[解決済み] Angular2 bodyタグにクラスを追加する
-
[解決済み] AngularでFormArrayからすべての項目を削除する
-
[解決済み] RxJSのmap演算子でエラーを出す方法 (angular)