重写自定义验证器角2
我是新的角2,我想实现一个自定义验证器的窗体控件,采用布尔(requiredAttribute)作为参数。重写自定义验证器角2
如果此参数为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,则表单控件是必需的,否则不是。
感谢
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'
}
感谢您的答复,但它没”工作。即使我输入html elemnt输入的所有值,表单也会被禁用。 – adem
你好,okey谢谢 – adem
你能否创建一个可以工作的plunker,我很乐意看看你的代码:) – Alex