Question

我是angular 2中的新手，我想为表单控件实现一个自定义验证器，它将boolean（requiredAttribute）作为参数。

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

我已经实现了这个，但似乎不起作用。所有输入（表格控制）都是必需的。我已经实现了这个代表自定义验证器的函数。

 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输入。

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

谢谢

Answer 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()

可以正常使用

原始帖子：

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

如果requiredAttribute为true，则需要表单控件，否则不需要

现在你在自定义验证器中正好相反。

有趣的是验证表单，null被认为是有效的，并且您返回的任何其他内容都被视为无效。所以你的自定义验证器应该看起来像这样：

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

覆盖自定义验证器角度2

1 个答案: