Angular 4表单在多个字段上的验证 [英] Angular 4 form validation on multiple fields

问题描述

我要实现的是对一个单独的formControl而不是整个表单进行验证.验证器应检查所有原子字段，例如门牌号，街道等，然后使google maps输入控件无效.

What I want to achieve is a validation on one single formControl and not the whole form. The validator should check all atom fields like house number, street etc. and then invalidate the google maps input control.

我正在使用Google Maps Autocomplete编写表单. 用户应在输入字段中输入一个地址，以触发Google Maps自动完成逻辑.选择地址后，回调函数将选择街道，门牌号码等，并使用API​​结果填写所需的地址数据字段. 其他表单元素显示为只读，因此我们始终获取有效数据并可以对输入执行验证.

I am programming a form with Google Maps Autocomplete. The user should enter a address into a input field that triggers the Google Maps autocomplete logic. When an address is selected the callback function selects the street, house number etc. and uses the API result to fill in the required address data fields. The other form elements are displayed but readonly so we always get valid data and can perform validation on the inputs.

问题是我的验证程序未触发输入字段.主输入字段始终有效，不会获得ng-invalid类.

The problem is that my validator doesn't trigger the input field. The main input field is always valid and doesn't get the ng-invalid class.

@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

I have made a punker of it so you can see it in action: https://plnkr.co/edit/2kncVT6thQTU1HMCmyTy?p=preview

推荐答案

我认为您的验证是正确的，您只需要显示验证消息即可

I think your validation is correct you just have to show the message for the validation like this

<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  };

这篇关于Angular 4表单在多个字段上的验证的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！