Question

我在复选框方面有些困惑，并且在Angular 2中验证了一个字段。我正在尝试对文本字段进行自定义验证。文本字段验证基于复选框的选择。一共有三个复选框，如复选框1、2、3。在这里，我只需要知道是否选择了checkbox2，如果选中，则需要传递一个布尔标志来验证文本字段。

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

<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文件，我将其声明为boolean标志并调用change方法，并将boolean标志传递给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（）方法中进行控制台，则布尔值会根据选择而变化。但是我不确定此过程是否正确，请帮助我。

Answer 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
        };
      }

Angular 2-通过复选框选择

1 个答案: