需要选中一个复选框 [英] Requiring a checkbox to be checked

问题描述

我希望在使用 FormBuilder for Angular 选中复选框之前禁用按钮.我不想显式检查复选框的值，而是更喜欢使用验证器，以便我可以简单地检查 form.valid.

在下面的两种验证情况下，复选框都是

interface ValidationResult {[键:字符串]:布尔值；}导出类 CheckboxValidator {静态检查(控制:控制){返回{检查":控制值}；}}@成分({选择器:'我的表单'，指令:[FORM_DIRECIVES]，模板:` <form [ngFormModel]="form" (ngSubmit)="onSubmit(form.value)"><input type="checkbox" id="cb" ngControl="cb"><button type="submit" [disabled]="!form.valid">`})导出类 SomeForm {regForm:控制组；构造函数(FB:FormBuilder){this.form = fb.group({cb: [ CheckboxValidator.checked ]//cb: [ false, Validators.required ] <-- 我也试过这个});}onSubmit(值:任何){console.log('提交:', this.form);}}

解决方案

.ts

@Component({选择器:'我的应用'，模板:`<h1>登录</h1><form [ngFormModel]="loginForm" #fm="ngForm" (submit)="doLogin($event)"><input type="checkbox" id="cb" ngControl="cb" #cb="ngForm" required><button type="submit" [disabled]="!loginForm.valid">登录</button><br/><div>Valid ={{cb.valid}}</div><div>Pristine ={{cb.pristine}}</div><div>Touch ={{cb.touched}}</div>
form.valid?={{loginForm.valid}}
<BR/><BR/></表单>`，指令:[ROUTER_DIRECTIVES,FORM_DIRECTIVES,CORE_DIRECTIVES]})导出类登录{构造函数(FB:FormBuilder){this.loginForm = fb.group({cb: [假, Validators.required],//cb: ['',Validators.required] - 这也适用.});}doLogin(事件){console.log(this.loginForm);event.preventDefault();}}

工作Plunker.

如果需要任何更改，请告诉我.

I want a button to be disabled until a checkbox has been checked using a FormBuilder for Angular. I don't want to explicitly check the value of the checkbox and would prefer to use a validator so that I can simply check form.valid.

In both validation cases below the checkbox is

interface ValidationResult {
  [key:string]:boolean;
}

export class CheckboxValidator {
  static checked(control:Control) {
    return { "checked": control.value };
  }
}

@Component({
  selector: 'my-form',
  directives: [FORM_DIRECTIVES],
  template: `  <form [ngFormModel]="form" (ngSubmit)="onSubmit(form.value)">
    <input type="checkbox" id="cb" ngControl="cb">
    <button type="submit" [disabled]="!form.valid">
    </form>`
})

export class SomeForm {
  regForm: ControlGroup;

  constructor(fb: FormBuilder) {
    this.form = fb.group({
      cb: [ CheckboxValidator.checked ]
      //cb: [ false, Validators.required ] <-- I have also tried this
    });
  }

  onSubmit(value: any) {
    console.log('Submitted: ', this.form);
  }
}

解决方案

.ts

@Component({
  selector: 'my-app', 
  template: `
    <h1>LOGIN</h1>
    <form [ngFormModel]="loginForm"  #fm="ngForm"  (submit)="doLogin($event)"> 

          <input type="checkbox" id="cb" ngControl="cb" #cb="ngForm" required>
          <button type="submit" [disabled]="!loginForm.valid">Log in</button>

          <br/>
              <div>Valid ={{cb.valid}}</div>
              <div>Pristine ={{cb.pristine}}</div>
              <div>Touch ={{cb.touched}}</div>
              <div>form.valid?={{loginForm.valid}}</div>
          <BR/>
          <BR/>

    </form>
    `,
  directives: [ROUTER_DIRECTIVES,FORM_DIRECTIVES,CORE_DIRECTIVES]
})

export class Login { 
  constructor(fb: FormBuilder) {
    this.loginForm = fb.group({
      cb: [false, Validators.required],
    //cb: ['',Validators.required] - this will also work.

    });
  }
  doLogin(event) {
    console.log(this.loginForm);
    event.preventDefault();
  }
}

Working Plunker.

Please let me know if any changes required.

这篇关于需要选中一个复选框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！