多个字段的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表单验证的主要内容,如果未能解决你的问题,请参考以下文章

Angular 4 表单验证器 - minLength 和 maxLength 不适用于字段类型号

angular表单怎么验证输入最大小长度

Angular 5 - 表单验证电子邮件

触发 Angular 表单提交中所有字段的验证

angular的 表单

如何从父组件 OnSubmit Angular 4 触发对子组件的验证?