多个字段的Angular 4表单验证
Posted
技术标签:
【中文标题】多个字段的Angular 4表单验证【英文标题】:Angular 4 form validation on multiple fields 【发布时间】:2018-05-01 00:59:53 【问题描述】:编辑: 我想要实现的是对一个 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
【问题讨论】:
【参考方案1】:我认为你的验证是正确的,你只需要显示这样的验证消息
<form [formGroup]="testForm">
<input type="text" formControlName="address">
<input type="text" formControlName="tel">
<input type="text" formControlName="mail">
</form>
<span *ngIf="!testForm.errors.myValidator">Incorrect<span>
在你的验证中使用这个
if(control.get(field1).value=="test" && control.get(field2).value=="test2")
return myValidator: true
return myValidator: false ;
【讨论】:
该死,发现我的错误。因为我不仅在 formControl 上应用了验证器,而且在整个 formGroup 上应用了验证器,它使 formGroup 无效。 是否可以使用模板驱动的表单来实现相同的功能?【参考方案2】:您的表单和验证似乎工作正常。我更新了你的 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>
这是更新的 plunk:
https://plnkr.co/edit/wqMdBQFvj2pIjJkWeCoV?p=preview
【讨论】:
以上是关于多个字段的Angular 4表单验证的主要内容,如果未能解决你的问题,请参考以下文章