import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, FormArray, Validators, ValidatorFn, AbstractControl } from '@angular/forms';
@Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
myForm: FormGroup;
constructor(private fb: FormBuilder) { }
ngOnInit() {
this.buildForm();
}
get vehicleGroup(): FormArray {
return <FormArray>this.myForm.get('vehicleGroup');
}
buildForm(): void {
this.myForm = this.fb.group({
name: ['', Validators.required],
vehicleGroup: this.fb.array([
this.fb.group({
vehicle: ['', Validators.required]
})
], [Validators.required]),
});
}
addVehicles(): void{
const itemToAdd = this.fb.group({
vehicle: ['', Validators.required]
});
this.vehicleGroup.push(itemToAdd);
}
deleteVehicle(i: number){
this.vehicleGroup.removeAt(i);
}
save(): void{
console.log('save');
}
}<form novalidate (ngSubmit)="save()" [formGroup]="myForm">
<div class="form-group">
<label for="name">Name</label>
<input id="name" type="text" formControlName="name">
</div>
<div class="form-group">
<label for="vehicle">Vehicle</label>
<div formArrayName="vehicleGroup" *ngFor="let vehicle of vehicleGroup.controls; let i=index">
<div class="form-group" [formGroupName]="i">
<div>
<input id="{{'vehicle'+i}}" type="text" formControlName="vehicle">
<button type="button" (click)="deleteVehicle(i)"
*ngIf="vehicleGroup.length >= 2">remove
</button>
</div>
</div>
</div>
<div class="form-group">
<button type="button" class="link-button" [disabled]="!vehicleGroup.valid" (click)="addVehicles()">
+ Add more vehicles
</button>
</div>
</div>
</form> 我有这个（stackBlitz）简单的表单，用 angular 创建formBuilder
formArray如果该特定字段无效，我只需要了解如何验证动态的每个元素并为每个元素显示唯一消息。我尝试了几种解决方案，并尝试custom validator function使用 return an ValidatorFn。有了它，我可以简单地验证formArray，但它对我的场景来说还不够好，而且我仍然无法根据验证函数的行为显示消息。如何缩小范围，我只需要知道是否有更好的方法来验证 this 的每个动态元素formArray。这些是验证规则。
如果有人可以向我展示某种以正确方式实现这一目标的方法，那就太好了，因为我已经对此感到震惊了将近 3 天，但仍然无法找到更好的解决方案。
我@rxweb/reactive-form-validators在我的项目中使用了唯一的验证器。它可以直接在组件中使用，而无需创建任何自定义验证功能。
您可以按如下方式编辑 addVehicles 方法：
addVehicles(): void{
const itemToAdd = this.fb.group({
vehicle: ['', RxwebValidators.unique()]
});
this.vehicleGroup.push(itemToAdd);
}
并添加
ReactiveFormConfig.set({"validationMessage":{"unique":"Enter unique value in the input"}});
到 ngOnInit。
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句