覆盖自定义验证器 angular 2

Question

我是 angular 2 的新手，我想为采用布尔值 (requiredAttribute) 作为参数的表单控件实现自定义验证器。

如果此参数为真，则需要表单控件，否则不需要。

我已经实现了这个但似乎不起作用。所有输入（表单控制）都变成必需的。我已经实现了代表自定义验证器的这个功能。

 function inputRequired( requiredAttribute: boolean) {
  return (control: FormControl): { [s: string]: boolean } => {
    if (requiredAttribute === false) {
      return {'input is not required': true};
    }else {
      return null;
    }
  };
}

并且我已经把它放在了initForm方法中。然后对于我的反应形式的输入形式文本：

 text: new FormControl('', [Validators.compose([inputRequired(this.selectedOperation.inputs[i].required)])]),

最终代码

private initForm() {
function inputRequired( requiredAttribute: boolean) {
  return (control: FormControl): { [s: string]: boolean } => {
    if (requiredAttribute === false) {
      return {'input is not required': true};
    }else {
      return null;
    }
  };
}
let operationName: any;
const operationInputs: FormArray = new FormArray([]);

if (this.selectedOperation.inputs != null) {
  for (let i = 0; i < this.selectedOperation.inputs.length; i++ ) {
    operationInputs.push(
      new FormGroup({
        name: new FormControl(this.selectedOperation.inputs[i].name),
        text: new FormControl('', [Validators.compose([inputRequired(this.selectedOperation.inputs[i].required)])]),
    defaultText: new FormControl(this.selectedOperation.inputs[i].defaultText),
      complexType: new FormControl(this.selectedOperation.inputs[i].complexType),
      type: new FormControl(this.selectedOperation.inputs[i].type),
      isMultivalued: new FormControl(this.selectedOperation.inputs[i].isMultiValued),
      values: new FormControl(this.selectedOperation.inputs[i].values),
      indicator: new FormControl(this.selectedOperation.inputs[i].indicator),
      required: new FormControl(this.selectedOperation.inputs[i].required),
      isSelected: new FormControl(this.selectedOperation.inputs[i].isSelected),
      simpleTypeVarietyOrComplexTypeContent: new FormControl(this.selectedOperation.inputs[i].simpleTypeVarietyOrComplexTypeContent),
      choiceContent: new FormControl(this.selectedOperation.inputs[i].choiceContent),
      inputQname: new FormControl(this.selectedOperation.inputs[i].inputQname),
        attributes: new FormControl(this.selectedOperation.inputs[i].attributes),
      children: operationInputsChildren,

      })
    );
  }
}
operationName = this.selectedOperation.name;
this.operationRequestForm = this.formBuilder.group({
    wsdlPath: [this.wsdlPath],
    name: [operationName],
    inputs: operationInputs,
  operationDateInvoke: ['', Validators.required],
  operationTimeInvoke: ['', Validators.required]
});

}

并且输入是 CustomInput class 的一个对象，它具有必需的属性。

  export class CustomInput {

              constructor(public name: string, public text: string, public 
               defaultText: string,
          public complexType: boolean, public type: string, public children: 
            CustomInput[] = [],
          public isMultiValued: boolean,
          public values: string[] = [], public indicator: string, public 
           required: boolean,
          public isSelected: boolean, public 
            simpleTypeVarietyOrComplexTypeContent: number,
          public choiceContent: boolean, public inputQname: string,
          public attributes: Map<string, string> = new Map<string, string>() 
    ) {}
   }

一个操作有很多输入元素。我想为操作创建一个反应形式。如果输入元素是必需的（其属性需要等于 true），则需要与操作输入元素关联的 HTML 输入。

那么我如何实现一个带有布尔参数的自定义验证器，如果此参数为真，则需要表单控件，否则不需要。

谢谢

Answer 1

更新

现在仔细观察 post，我意识到您根本不需要自定义验证器。构建表单时，您可以调用一个函数来检查 this.selectedOperation.inputs[i].required 的值，如果它是 true 则设置所需的验证器，如果不是，则什么都不做。

因此在构建嵌套表单组之后调用该函数，但是在迭代结束之前：

   }); // end of formgroup build
   this.checkValidator(this.selectedOperation.inputs[i].required, i)
) // end of iteration

和函数：

checkValidator(bool: boolean, index: number) {
  const control = this.operationRequestForm.controls.operationInputs.controls[index].controls.text
  if(bool) {
    control.setValidators(Validators.required)
    control.updateValueAndValidity();
  }
}

一个非常简化的 Plunker，它展示了它与 setValidators() 和 updateValueAndValidity()

一起工作得很好

原版POST:

在不测试代码的情况下（意味着如果还会有其他问题），您实际上在自定义验证器中将其反转。你想...

if requiredAttribute is true the form control is required, else it is not required

现在您在自定义验证器中执行相反的操作。

有趣的是验证表单，null 被认为是有效的，而你 return 被认为是无效的。所以你的自定义验证器实际上应该是这样的：

if (requiredAttribute === true) { 
  return {'inputRequired': true}; // field is required
}else {
  return null; // field is not required when 'requiredAttribute' is 'false'
}

覆盖自定义验证器 angular 2

Override the custom validator angular 2

validation

custom-validators

angular

angular-reactive-forms