2

我是 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 类的对象，该对象具有必需的属性。

  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>() 
    ) {}
   }

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

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

谢谢

4

1 回答 1

1

更新

现在，当仔细查看帖子时，我意识到您根本不需要自定义验证器。在构建表单时，您可以调用一个函数来检查它的值，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()

原帖：

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

ifrequiredAttribute是否true需要表单控件，否则不需要

现在您在自定义验证器中做相反的事情。

有趣的是，验证表单被认为null是有效的，而您返回的任何其他内容都被认为是无效的。因此，您的自定义验证器实际上应该如下所示：

if (requiredAttribute === true) { 
  return {'inputRequired': true}; // field is required
}else {
  return null; // field is not required when 'requiredAttribute' is 'false'
}
于 2017-05-31T12:21:39.677 回答