Question

修改我想要实现的是对单个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

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

Answer 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>

这是更新的插件：

https://plnkr.co/edit/wqMdBQFvj2pIjJkWeCoV?p=preview

多个字段上的Angular 4表单验证

2 个答案: