首先，我有一個 Angular 反應式表單，它有一個可以FormArray向表單添加另一個按鈕的按鈕。所有驗證都很好并且按預期作業。將另一個動態控制元件引入已經動態的表單組時，事情變得有些棘手。此控制元件根據在另一個表單控制元件中所做的選擇來顯示/隱藏。
當控制元件顯示時，我引入驗證，當控制元件隱藏時，驗證被清除。這可確保我的表單正確保持有效/無效。
它的行為有點錯誤，例如，當我完成一組輸入并添加另一組動態輸入時，都觸發了隱藏控制元件......然后修改先前的隱藏輸入 - 表單仍然正確。例如
選擇123會觸發“其他代碼”控制元件，洗掉該值應該會使表單無效，但此時它仍然有效。
我為選擇分配了一個更改功能，以確定選擇了什么。
selectClick(x) {
const f = this.form;
let items = this.form.get('justificationItems') as FormArray;
if (x === '123') {
items.controls.forEach(i => {
console.log(i)
i['controls'].other.setValidators([Validators.required]);
// i['controls'].other.updateValueAndValidity();
});
} else {
items.controls.forEach(i => {
i['controls'].other.clearValidators();
// i['controls'].other.updateValueAndValidity();
});
}
f.updateValueAndValidity();
}
我懷疑在更改 select 屬性以觸發上述內容時，它不會對正確的索引項執行此操作，而是對所有人都執行此操作？
StackBlitz - https://stackblitz.com/edit/angular-prepopulate-dynamic-reactive-form-array-ufxsf9?file=src/app/app.component.ts
uj5u.com熱心網友回復：
“清除/添加驗證器”的最佳方式實際上是啟用或禁用 formControls。請記住 formControl 具有以下狀態之一：
type FormControlStatus = 'VALID' | 'INVALID' | 'PENDING' | 'DISABLED';
所以我們可以簡單地啟用/禁用 FormControl。此外，當我們創建 formGroup 時，我們可以創建禁用，所以一開始不會是INVALID
好吧，代碼有點混亂。首先使用 i['controls'].other （你真的可以i.controls.other使用 FormBuilder 和 new Form.
與往常一樣，我們有一個 FormArray，我們創建了一個 getter
get justificationItems()
{
return this.form.get('justificationItems') as FormArray;
}
取而代之的是使用兩個不同的函式來創建表單，我們可以使用和 unique
createJustificationField(x: any=null): FormGroup {
x=x || {name:null,description:null,code:null,other:null}
return new FormGroup({
name: new FormControl(x.name, [Validators.required]),
description: new FormControl(x.description, [Validators.required]),
code: new FormControl(x.code, [Validators.required]),
other: new FormControl({value:x.other,
disabled:x.code!=='123'},[Validators.required]),
});
}
看到我們可以使用 as
this.createJustificationField(..an object..)
this.createJustificationField()
我們的函式: createForm, addItemand selectClick(I like more another name like codeChangebut is a small change) 變成了 like
createForm() {
this.service.getmodel().subscribe((response:any) => {
this.form = new FormGroup({
justificationItems: new FormArray(
response.justificationItems.map(x=>
this.createJustificationField(x))
),
});
});
}
addItem(): void {
this.justificationItems.push(this.createJustificationField());
this.form.updateValueAndValidity();
}
selectClick(x,i) {
if (x === '123')
this.justificationItems.at(i).get('other').enable()
else
this.justificationItems.at(i).get('other').disable()
this.form.updateValueAndValidity();
}
.html 變得更加清晰
<form *ngIf="form" [formGroup]="form">
<div formArrayName="justificationItems">
<div
*ngFor="
let orgs of justificationItems.controls;
let i = index;
let last = last
"
[formGroupName]="i"
>
<label>Name </label>
<input formControlName="name" placeholder="Item name" /><br />
<label>Description </label>
<input
formControlName="description"
placeholder="Item description"
/><br />
<label>Code </label>
<select
(change)="selectClick($event.target.value, i)"
formControlName="code"
>
<option value="123">123</option>
<option value="456">456</option></select
><br />
<ng-container *ngIf="justificationItems.at(i).value.code === '123'">
<label>Other Code </label>
<input formControlName="other" placeholder="other" /><br /><br />
</ng-container>
<button
*ngIf="last"
[disabled]="justificationItems.at(i).invalid"
type="button"
(click)="addItem()"
>
Add Item
</button>
</div>
</div>
<button [disabled]="!form.valid" type="button">Submit</button>
</form>
<p>Is form valid: {{ form?.valid | json }}</p>
看堆疊閃電戰
uj5u.com熱心網友回復：
根本原因：selectClick觸發時，您清除或設定other陣列形式的所有控制元件的驗證。您應該只為 formArray 中的一種形式設定。
我重寫了你的函式：
selectClick(x, index) {
const f = this.form;
let items = this.form.get('justificationItems') as FormArray;
if (x === '123') {
items.controls[index]['controls'].other.setValidators([Validators.required]);
} else {
items.controls.forEach(i => {
items.controls[index]['controls'].other.clearValidators();
i['controls'].other.updateValueAndValidity();
});
}
items.controls[index]['controls'].other.updateValueAndValidity();
}
更改模板中的代碼：
<select
(change)="selectClick($event.target.value, i)"
formControlName="code"
>
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/431280.html
標籤：javascript 有角度的 打字稿 验证 角反应形式
上一篇：活動選項卡的HTML顏色