我有一个formArray并单击我调用addReps方法来推送一个新的formGroup。我想使用setValidators方法动态添加一些验证器,但是当我这样做时,我得到了错误: 无法读取未定义的属性“ setValidators” 。我的表单工作正常,但我不明白为什么会收到此错误。我的formControl是否在访问this.reps.controls [“ mobileNumber”]时出错?
constructor(private fb: FormBuilder, private stateService: StateService, private apiService: ApiService) {
this.form = this.fb.group({
reprepresentative: this.fb.array([]),
});
}
addReps() {
this.reps = this.form.controls.reprepresentative as FormArray;
this.reps.push(this.fb.group({
firstname: ['', [Validators.required,
Validators.minLength(2),
this.ValidateNames
]],
surname: ['', [Validators.required,
Validators.minLength(2),
this.ValidateNames
]],
mobileNumber: ['', [Validators.required,
Validators.pattern(/^(69[0-9])[0-9]{7}$/)
]],
isInitiator: false,
editRep: true
}));
this.reps.controls["mobileNumber"].setValidators([this.SameMobileValidator,Validators.required,Validators.pattern(/^(69[0-9])[0-9]{7}$/)]);
this.reps.controls["mobileNumber"].updateValueAndValidity();
}
SameMobileValidator(formControl: AbstractControl){
let repList = this.stateService.reprepresentativeList;
const found = repList.some(el => el.MobilePhone == formControl.value)
if(!found) return null;
else { return { mismatch: true }; }
}
我也尝试这样做:
this.reps.get("mobileNumber").setValidators([Validators.required,Validators.pattern(/^(69[0-9])[0-9]{7}$/),this.ValidateNames]);
this.reps.get("mobileNumber").updateValueAndValidity();
但是我遇到了同样的错误
答案 0 :(得分:1)
首先,不要使用.controls
来获得指定的控件。使用get()
。因为this.reps
是FormArray
,所以您将获得一个异常,当您访问controls
属性时,您将得到这样的对象:
{
1: [formControl],
2: [formControl],
3: [formControl]
}
如您所见,mobileNumber
中没有字段this.reps
。您必须直接访问formControl
才能获得mobileNumber
formControl
。或者,您可以像之前所做的那样在构建表单时直接向该字段添加validator
。如果您的验证逻辑验证f.e.数字唯一性,您必须在FormArray
(或FormGroup
,取决于您使用的方式)上附加验证器,而不是直接在FormControl
上。
答案 1 :(得分:1)
由于ForArray基于索引,因此您可以使用索引值来获取特定的formGroup控件。
尝试一下:
this.reps.at(0).get('mobileNumber').setValidators([=[Validators.required,Validators.pattern(/^(69[0-9])[0-9]{7}$/),this.ValidateNames])
答案 2 :(得分:1)
this.reps 是一个formArray,因此您应该更改
this.reps.controls["mobileNumber"].setValidators([this.SameMobileValidator,Validators.required,Validators.pattern(/^(69[0-9])[0-9]{7}$/)]);
作者
const reprepresentativeControl = this.form.get('reprepresentative');
reprepresentativeControl.controls.forEach(c => c.get("mobileNumber").setValidators([this.SameMobileValidator,Validators.required,Validators.pattern(/^(69[0-9])[0-9]{7}$/)]));
reprepresentativeControl.updateValueAndValidity();