javascript - 特定条件下的 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));
  ...
}