![](/img/trans.png)
[英]How to manage dynamic validators in ReactiveForms with Angular 2+?
[英]How to add dynamic custom validations in angular2 (ReactiveForms)?
我有要求,我想在哪里实现逻辑以动态地将对象数组数据分配给输入控件,并基于更新,我想更新数组以及触发验证以检查控件中输入的名称/数据是否具有重复条目。 为了进行验证,我使用了ReactiveForm模块。 但我面临以下2个问题–
零件:
@Component({
selector: 'my-app',
template: `
<div>
<h3> Custom Group Validation</h3>
<form [formGroup]="myForm">
<div class="left">
names: <br>
<div formArrayName="names">
<div *ngFor="let item of namesArray.controls; let i = index">
<input type="text" [formControlName]="i">
<button (click)="removeAt(i)">X</button><br>
</div>
</div>
<div *ngIf="namesArray.hasError('duplicate')">
duplicate entries
</div>
<pre>Array value: <br>{{namesArray.value | json}}</pre>
</div>
</form>
</div>
`
})
课程(摘要):
namesArray:FormArray = new FormArray([], this.customGroupValidation );
dataArray: { custId: number, customerName: string }[] = [
{ custId: 101, customerName: 'John' },
{ custId: 102, customerName: 'Mike' },
{ custId: 103, customerName: 'Julia' }];
ngOnInit():void{
for(let ele of this.dataArray){
this.namesArray.push(
new FormControl(ele.customerName)
);
}
}
任何帮助表示赞赏!
处理这两个问题的一种方法是订阅.valueChanges
事件,然后使用check in方法来验证FormControl值是否存在重复条件。
在ngOnInit()中创建FormControl并将其添加到FormGroup时,还要分配custId属性
代码段-
import { Component, NgModule, OnInit } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { FormBuilder, FormGroup, FormArray, AbstractControl, Validators, FormControl, ReactiveFormsModule } from '@angular/forms'
@Component({
selector: 'my-app',
template: `
<div>
<h3> Custom Group Validation</h3>
<form [formGroup]="customerFormGroup">
<div class="left">
names: <br>
<div>
<div *ngFor="let item of dataArray">
<input type="text" [formControlName]="item.custId" [(ngModel)]="item.customerName">
<div *ngIf="customerFormGroup.controls[item.custId] && customerFormGroup.controls[item.custId].errors">
duplicate
</div>
</div>
</div>
<pre>Array value: <br>{{dataArray | json}}</pre>
</div>
</form>
</div>
`
})
export class App implements OnInit {
customerFormGroup: FormGroup = new FormGroup({});
dataArray: { custId: number, customerName: string }[] = [
{ custId: 101, customerName: 'John' },
{ custId: 102, customerName: 'Mike' },
{ custId: 103, customerName: 'Julia' }];
ngOnInit(): void {
for (let ele of this.dataArray) {
let control: FromControl = new FormControl(ele.customerName);
this.customerFormGroup.addControl(ele.custId, control);
}
this.customerFormGroup.valueChanges.subscribe(
data => this.onValueChanged(data)
);
}
onValueChanged(data?: any) {
if (!this.customerFormGroup) return;
let formGroup = this.customerFormGroup;
var result = _.groupBy(formGroup.controls, c => {
if (c.value) return c.value.toLowerCase();
else c.value;
});
for (let prop in result) {
if (result[prop].length > 1) {
_.forEach(result[prop], function (item: any) {
if (item.dirty && item.value) {
item.setErrors({
'duplicate': true
});
}
})
}
}
}
}
@NgModule({
imports: [BrowserModule, ReactiveFormsModule],
declarations: [App],
bootstrap: [App]
})
export class AppModule { }
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.