Angular 2 - 通过复选框选择答案

【问题标题】：Angular 2 - pass check box selectionAngular 2 - 通过复选框选择
【发布时间】：2019-05-13 21:18:34
【问题描述】：

我对复选框和验证 Angular 2 中的字段有点困惑。我正在尝试对文本字段进行自定义验证。文本字段验证基于复选框选择。有三个复选框，如 checkbox1,2,3。在这里我只需要知道 checkbox2 是否被选中，如果选中，我需要传递一个布尔标志来验证文本字段。

为此，我编写了一个更改方法并像这样在该特定复选框中调用。

<div class="bx--row">
    <div>
        <label  class="bx--label">select your options:</label>
    </div>
    <div>
        <input class="bx--checkbox-input" 
               type="checkbox" 
               name="ch1"  
               formControlName="yourOption">
        <label for="ch1" class="bx--label">checkbox1</label>
     </div>	
     <div>
         <input class="bx--checkbox-input"  
                type="checkbox" 
                name="ch2" 
                (change)="checkSelection()" 
                formControlName="yourOption">
         <label for="ch2" class="bx--label">checkbox2</label>
      </div>  
      <div>
          <input class="bx--checkbox-input"  
                 type="checkbox" name="ch3"  
                 formControlName="yourOption" >
          <label for="ch3" class="bx--label">chekbox3</label>
      </div>             
 </div>

这是我的 .ts 文件，我将其声明为布尔标志并调用更改方法并将布尔标志传递给 customvalidator 参数。

checkOption = false;
checkboxSelection(){
    this.checkOption = this.formGroupCheckbox.controls['youroption'].value;
    console.log(this.checkOption);
};

formGroupCheckbox(){
    'textfield': new FormControl('', [customvalidator.validateField(this.checkOption);
}

问题：当我尝试传递布尔标志时，总是只发送 false，即使复选框也被选中。但是，如果我在 checkboxSelection() 方法中进行控制台，那么我的布尔值会根据选择而变化。但我不确定这个过程是否正确，请帮助我。

【问题讨论】：

标签： angular

【解决方案1】：

请注意，在调用formGroupCheckbox() 函数时，checkOption 的值设置为 false。因此，当创建文本字段控件时，您的验证器函数具有 false 值。发生这种情况是因为您的 checkOption 属性是值类型。为避免这种情况，您应该传递您的选项控件引用，以便您的验证器函数可以访问实际控件的值。

而不是尝试在那里传递整个youroption 控制。试试：

new FormControl('', [customvalidator.validateField(this.formGroupCheckbox.controls['youroption'])])

然后在customvalidator:

validateField(checkboxControl: AbstractControl): ValidatorFn {
        return (control: AbstractControl): {[key: string]: any} | null => {
          // You can access actual checkbox value with checkboxControl.value
          // Here you should write your custom validation logic
        };
      }

【讨论】：