重写自定义验证器角2

Question

我是新的角2，我想实现一个自定义验证器的窗体控件，采用布尔（requiredAttribute）作为参数。

如果此参数为true，则表单控件是必需的，否则它不是必需的。

我已经实现了这一点，但似乎没有奏效。所有输入（表格控制）becoms需要。 我已经实现了代表自定义验证器的这个函数。

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

UPDATE

现在在看后更接近的时候，我知道你并不需要一个自定义的验证都没有。在构建表单时，可以调用一个函数来检查this.selectedOperation.inputs[i].required的值，如果它是true则设置所需的验证器，如果不是，则不执行任何操作。

所以调用函数的嵌套formgroup的构建之后，但前迭代结束：

}); // 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' 
}