Question

我正在尝试基于将一个字段更改到formGroup内的另一个字段进行验证，该字段位于此组的多个实例的FormArray内。我在其中一个字段上使用mydatepicker。例如，当更改日期时，我希望仅验证该组中的原因更改字段以检查以确保未选择第一个选项（值为0）。我有两个问题：

当我更改日期时，不会立即检查更改原因字段的有效性。它只发生在我将字段的值更改为1然后更改为0.它的默认值设置为0，当我更改日期时它应立即选中它。
当它最终意识到表单无效时，它会对所有更新按钮执行此操作，而不仅仅是我更改了Date字段的FormGroup中的按钮。

ts文件代码：

INTO

HTML：

subscribeDateChange(formGroup){
(<any>this.rfcActionTasksForm).controls.tasks.controls[0].controls['DueDate'];
const tasks = formGroup;


const changes$ = tasks.controls['DueDate'].valueChanges;



changes$.subscribe(dd => {
  var arrayControl = this.rfcActionTasksForm.get('tasks') as FormArray;
  var item = arrayControl.at(1);
  console.log(item);
  if(tasks.value['ReasonForChangeId'] == '0'){

    tasks.controls['ReasonForChangeId'].setValidators(Validators.pattern(/([1-9])/));

  }


});
}

ngOnInit() {
this.rfcActionTasksForm = this._fb.group({
  tasks: this._fb.array([this.buildTask()])

});


}
buildTask(): FormGroup {
  return this._fb.group({
      Id: '',
      Action: ['', Validators.required],
      Step: '',
      AssignedToId: ['', Validators.required],
      AssignedToColour: '',
      DueDate: ['', Validators.required],
      ReasonForChangeId: '',
      OriginalDueDate: '',
      Completed: '',
      OverDue: ''
  },{
    validator: (formGroup: FormGroup) => {
      //return this.validateDays(formGroup);
      //console.log(formGroup.controls['DueDate']);
      //this.subscribeDateChange(formGroup.controls['DueDate'], formGroup.controls['ReasonForChangeId']);
     return this.subscribeDateChange(formGroup);
    }
    });

}

Answer 1

我在这里看到了多个问题：

验证器的格式应为：

(control: AbstractControl): {[key: string]: any} => {
    if(isValid(control))
      return null;
    else
      return {"myValidator":"invalid thing detected"};
 }

您每次都会返回undefined，因此无法正常工作。您无法订阅，因为这意味着每次您在表单中进行更改时，您都会重新订阅整个组的价值变化，这是无意义的。

忘掉valueChanges，你需要同步进行控制。检查是否有错误并使用您的子控件的setError()方法。

类似的东西：

(group: FromGroup): {[key: string]: any} => {
    if(!isValid(group)){
      group.get("myChildControl").setErrors({"localError":"error detected !"});
      return {"groupError":"error detected !"};
    }
    return null;
 }

我不确定您是否应该使用setError(errors,{emitEvent:false})的第二个参数来避免传播。

angular2 formArray条件验证

1 个答案: