我已经浏览了 stackOverflow 和 internet 中的所有答案。
我只有FormArray 和 FormGroup的解决方案,但我只想将数据保存在 FormArray
WorkId:["a","b","c"]
以及我从服务器获得的数据也是上述格式
这是我的代码
WorkIDList: this.formBuilder.array([
this.formBuilder.control(""), Validators.required
], Validators.required);
get WorkIDlist() {
return this.registerForm.get("WorkIDList") as FormArray;
}
addworkidlist() {
this.WorkIDlist.push(this.formBuilder.control(""));
}
submit(data, event: Event) {
this.submitted = true;
if (this.registerForm.invalid) {
this.validateAllFields(this.registerForm);
return;
// alert("all fields must be filled");
} else {
event.preventDefault();
console.log("data", data);
}
}
// validation on submit
validateAllFields(formGroup: FormGroup) {
Object.keys(formGroup.controls).forEach(field => {
const control = formGroup.get(field);
if (control instanceof FormArray) {
control.markAsTouched();
}
if (control instanceof FormControl) {
control.markAsTouched({
onlySelf: true
});
} else if (control instanceof FormGroup) {
this.validateAllFields(control);
}
});
}
<div class="form-group">
<div class="col-sm-9" formArrayName="WorkIDList">
<div *ngFor="let address of WorkIDlist.controls; let i=index">
<input class="form-control workIdList" type="text" [formControlName]="i" required />
<!-- <div *ngIf="address.invalid && (address[i].dirty || address[i].touched)"
class="alert alert-danger">
<div *ngIf="address[i].errors.required">
WorkspaceName is required.
</div>
</div> -->
<div *ngIf="address[i].invalid">
<div *ngIf="address.hasError('required')">
Error
</div>
</div>
</div>
<button type="button" (click)="addworkidlist()">Add</button>
</div>
</div>
我不能在 html 中进行验证,也不能抛出错误验证submit()
通过脚本进行错误验证
任何人都可以帮助解决这个问题。
提前致谢。