在某些条件下进行 Angular2 表单验证

Question

我已经使用表单生成器设置了一个表单，我想根据值更改设置自定义验证

这就是我的表格

 constructor(){

 this.newtruck  = this._formbuilder.group(
  {
    'trucktype':[''],
    'transporter':[''],
    'dropdown_transporter':[''],
    'truck_number':[''],
    'dropdown_truck_number':[''],
    'driver_name':[''],
    'dropdown_driver_name':[''],
    'driver_number':[''],
    'material':[''],
  }
 )

}

在下拉更改中，将值传递给此函数

updateSelectedValue(item) {

if(item){
  if(item.dropdown == 1) {
    this.newtruck.setControl("dropdown_transporter", new FormControl('', Validators.required));
    this.newtruck.setControl("dropdown_transporter", new FormControl('', Validators.required));
    this.newtruck.setControl("dropdown_driver_name", new FormControl('', Validators.required));

  } else  if(item.dropdown == 0){
     this.newtruck.reset();

    this.newtruck.setControl("transporter", new FormControl('', Validators.required));
    this.newtruck.setControl("truck_number", new FormControl('', Validators.required));
   this.newtruck.setControl("driver_name", new FormControl('', Validators.required));
    this.newtruck.setControl("driver_number", new FormControl('', Validators.required));
}
}

}

现在在表单上我有一个按钮，我设置为启用或禁用

<button ion-button icon-rig color="danger" [disabled]="!newtruck.valid" (click)="onCreate()" > Save
      <ion-icon name="send"></ion-icon>

    </button>

即使表单被实例化了，上面的按钮也总是被禁用，这可能是错误的，因为你一开始可以看到没有调用验证器

Answer 1

您可以通过自定义验证器函数包装验证器来将条件构建到验证器中。

this.newtruck.setControl("dropdown_transporter", 
  new FormControl('', 
    (control:Control) => { 
      if(item && item.dropdown == 1) {
      return Validators.required(control)
      }
    )
  );

你也可以像移出整个函数

updateSelectedValue(item) 

  var requiredValidator = (control:Control) => { 
    if(item && item.dropdown == 1) {
      return Validators.required(control)));
    }
  };

  this.newtruck.setControl("dropdown_transporter", 
    new FormControl('', requiredValidator));
  ...
}