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

问题描述

我想要实现的是对单个 formControl 而不是整个表单的验证.验证器应检查所有原子字段，如门牌号、街道等，然后使谷歌地图输入控件无效.

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 地图自动完成功能的表单.用户应在触发 Google 地图自动完成逻辑的输入字段中输入地址.选择地址后，回调函数会选择街道、门牌号等，并使用 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屋！