EDIT:我想要实现的是对单个 formControl 而不是整个表单的验证。验证器应该检查所有原子字段,如门牌号、街道等,然后使谷歌地图输入控件无效。
我正在使用 Google 地图自动完成功能编写表单。
用户应在触发 Google 地图自动完成逻辑的输入字段中输入地址。选择地址后,回调函数会选择街道、门牌号等,并使用 API 结果填写所需的地址数据字段。
其他表单元素显示但只读,因此我们始终获得有效数据并可以对输入执行验证。
问题是我的验证器没有触发输入字段。主输入字段始终有效,并且不会获得 ng-invalid 类。
@Component({
selector: 'my-app',
styles: [`
.ng-valid {
border:#0ff;
}
.ng-invalid {
border:#f00;
}
`],
template: `
<form [formGroup]="testForm">
<input type="text" formControlName="address">
<input type="text" formControlName="tel">
<input type="text" formControlName="mail">
</form>
`
})
export class AppComponent {
testForm:FormGroup;
constructor(private fb: FormBuilder) {
this.testForm = this.fb.group({
address:['', myValidator],
tel:[''],
mail:['']
}, {
validator: myValidator("tel", "mail")
});
}
}
export const myValidator = (field1, field2): ValidatorFn => (control: AbstractControl) => {
if(control.get(field1).value=="test" && control.get(field2).value=="test2") {
return null;
}
return { myValidator: { valid: false } };
}
我把它做了一个朋克,这样你就可以看到它的实际效果:https://plnkr.co/edit/2kncVT6thQTU1HMCmyTy?p=preview https://plnkr.co/edit/2kncVT6thQTU1HMCmyTy?p=preview
您的表单和验证似乎有效。我更新了你的 plunker 并在你的模板中添加了两个 div:
<form [formGroup]="testForm">
<input type="text" formControlName="address">
<input type="text" formControlName="tel">
<input type="text" formControlName="mail">
</form>
<div *ngIf="testForm.valid">Your form is valid! yay!</div>
<div *ngIf="testForm.invalid">Your form is invalid!</div>
这是更新后的内容:
https://plnkr.co/edit/wqMdBQFvj2pIjJkWeCoV?p=preview https://plnkr.co/edit/wqMdBQFvj2pIjJkWeCoV?p=preview
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)