问题描述
我在表单内有一个表单。当我在选择值为“3”的下拉列表后单击添加新文本字段时,我正在调用一个表单数组,在那里我得到多个文本框。 一切正常。 但我遇到了一个问题:
仅当所选字段不为空时,我才想添加新的文本字段。 也就是说,如果“listItem”文本框为空,并且当我单击“addnew textfield”时,它会显示一个警报。 和所有文本字段类似。
我无法在 formarray 字段中输入多个字母。
请帮我解决问题。 提前致谢。
<form [formGroup]="addForm" (ngSubmit)="onSubmit()">
<input type="text" class="form-control" placeholder="enter term"
formControlName="name">
<input type="text" class="form-control" placeholder="Enter Id"
formControlName="id">
<input type="text" class="form-control" placeholder="Type" formControlName="type">
<select class="Dropdown" formControlName="category">
<option value="undefined" selected disabled >Select Category</option>
<option *ngFor="let list of test" [value]="list.id" >{{list.name}}</option>
</select>
<ng-container *ngIf="showarray">
<input type="text" formControlName="listItem" class="form-control" placeholder="enter dropdownlist items">
<a (click)="addGroup()">Add New Textfield</a>
</ng-container>
<span formArrayName="times" *ngFor="let time of addForm.controls.times?.value; let i = index;">
<span [formGroupName]="i">
<input type="text" class="form-control" formControlName="lists" placeholder="enter dropdown options">
</span>
<a (click)="removeGroup(i)">Remove Textfield</a>
</span>
<input type="Submit" class="savebtn" Value="Save" Style="width: 100px;"/>
</form>
export class AppComponent {
name = 'Angular ' + VERSION.major;
addForm: FormGroup;
submitted = false;
showarray: any;
public dropdownitems = [{
name: "A",id: 1
},{
name: "B",id: 2
},{
name: "C",id: 3
},{
name: "D",id: 4
}]
constructor(
private formBuilder: FormBuilder,) { }
ngOnInit(): void {
this.addForm = this.formBuilder.group({
name: ['',[Validators.required,Validators.pattern('[a-zA-Z# ]*')]],times: this.formBuilder.array([])
});
}
onSubmit(){
this.submitted = true;
if (this.addForm.invalid) {
alert ('Please fill up complete details');
return;
}
console.log(this.addForm.value);
}
value = this.formBuilder.group({
lists: ['',Validators.required],});
addGroup() {
const val = this.formBuilder.group({
lists: ['',});
const form = this.addForm.get('times') as FormArray;
form.push(val);
}
removeGroup(index) {
const form = this.addForm.get('times') as FormArray;
form.removeAt(index);
}
}
解决方法
问题在于您如何遍历 formArray。您可以不使用 *ngFor="let time of addForm.controls.times?.value;
,您需要使用 formArray 创建一个 getter 并迭代 formArray.controls(永远不要超过“值”)否则,每次进行更改时,Angular重新绘制数组,你就会失去焦点。
所以,首先创建一个像
这样的函数 get timesArray()
{
return this.addForm.get('times') as FormArray
}
然后注意标签
<!--first a div (or ng-container if you can not add extra tags) with formArrayName-->
<ng-container formArrayName="times">
<!--then iterate over timesArray.controls and use [formGroupName]-->
<span *ngFor="let time of timesArray.controls;let i=index"
[formGroupName]="i">
<!--after you use formControlName-->
<input type="text" class="form-control" formControlName="lists"
placeholder="enter dropdown options">
<a (click)="removeGroup(i)">Remove Textfield</a>
</span>
</ng-container>
顺便说一句:嗯,你有一个 FormGroups 的 formArray,你也可以选择有一个 FormControls 的 FormArray。我知道这不是您的表单,但如果只想拥有一个值数组而不是标签更改的对象数组,请参阅在这种情况下您不使用 [formGroupName] 和 formControlName="list" else [formControlName ]="我"
<!--first a div (or ng-container if you can not add extra tags) with formArrayName-->
<div formArrayName="times">
<!--then iterate over timesArray.controls -->
<span *ngFor="let time of timesArray.controls;let i=index">
<!--after you use formControlName[i]-->
<input type="text" class="form-control" [formControlName]="i"
placeholder="enter dropdown options">
<a (click)="removeGroup(i)">Remove Textfield</a>
</span>
</div>
好吧,在这种情况下,函数 addGroup 和 removeGroup 很简单
//see that we use the "getter" timesArray
addGroup() {
this.timesArray.push(new FormControl());
}
removeGroup(index) {
this.timesArray.removeAt(index)
}
您可以查看此 article of Netanel Basal 关于 FormArrays