重寫自定義驗證器角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' 
}