在Angular 6中,可以使用自定义验证器来实现带有条件的嵌套表单验证。下面是一个示例代码,展示了如何创建一个带有条件自定义验证的嵌套表单。
首先,我们需要导入所需的模块和类:
import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, Validators, FormControl } from '@angular/forms';
然后,在组件类中定义一个带有嵌套表单的表单组:
@Component({
selector: 'app-my-component',
templateUrl: './my-component.component.html',
styleUrls: ['./my-component.component.css']
})
export class MyComponentComponent implements OnInit {
myForm: FormGroup;
constructor(private fb: FormBuilder) { }
ngOnInit() {
this.myForm = this.fb.group({
name: ['', Validators.required],
age: ['', Validators.required],
address: this.fb.group({
street: ['', Validators.required],
city: ['', Validators.required],
state: ['', Validators.required]
})
});
// 添加自定义验证器至表单控件
const stateControl = this.myForm.get('address.state');
stateControl.setValidators(this.customValidator.bind(this));
}
customValidator(control: FormControl) {
const cityControl = this.myForm.get('address.city');
const state = control.value;
if (state === 'California' && !cityControl.value) {
return { 'cityRequired': true };
}
return null;
}
onSubmit() {
// 处理表单提交
}
}
在上面的代码中,我们首先使用FormBuilder创建了一个myForm表单组,该组包含了一个嵌套表单address。然后,我们在address.state控件上添加了一个自定义验证器customValidator。该验证器会检查用户选择的州是否为“California”,如果是的话,那么就要求用户填写城市信息。
最后,在模板文件中,我们可以使用{{ myForm.valid }}
来检查表单的有效性,并使用{{ myForm.errors | json }}
来显示错误消息。
在上面的模板代码中,我们使用了formGroup