angular - cloak - ng-src

Requerir una casilla de verificación para ser marcado

Question

Quiero que se deshabilite un botón hasta que se haya marcado una casilla de verificación utilizando FormBuilder para Angular. No quiero verificar explícitamente el valor de la casilla de verificación y preferiría usar un validador para poder simplemente marcar form.valid .

En ambos casos de validación debajo de la casilla de verificación está

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

Answer 1

Desde Angular 2.3.1 puedes usar Validators#requiredTrue :

Componente:

this.formGroup = this.formBuilder.group({
  cb: [false, Validators.requiredTrue]
});

Modelo:

<form [formGroup]="formGroup">
  <label><input type="checkbox" formControlName="cb"> Accept it</label>
  <div style="color: red; padding-top: 0.2rem" *ngIf="formGroup.hasError(''required'', ''cb'')">
    Required
  </div>
  <hr>
  <div>
    <button type="submit" [disabled]="formGroup.invalid">Submit</button>
  </div>
</form>

DEMO DE STACKBLITZ

Answer 2

Encontré que Validator.required no funciona correctamente para las casillas de verificación. Si marca una casilla de verificación y luego la desmarca, FormControl seguirá mostrándola como válida, aunque no esté marcada. Creo que solo verifica que lo configures para algo, sea verdadero o falso.

Aquí hay un validador simple y rápido que puede agregar a su FormControl:

  mustBeChecked(control: FormControl): {[key: string]: string} {
    if (!control.value) {
      return {mustBeCheckedError: ''Must be checked''};
    } else {
      return null;
    }
  }

Answer 3

Puede usar un ValidatorPattern y verificar el valor correcto (booleano):

<input type="checkbox" [formControl]="myForm.controls[''isTosRead'']">

Y aquí está el enlace:

this.myForm = builder.group({
        isTosRead: [false, Validators.pattern(''true'')]
    });

Answer 4

Tengo este ejemplo muy simple:

En su componente:

login : FormGroup;

constructor(@Inject(FormBuilder)formBuilder : FormBuilder) {
this.login = formBuilder.group({userName: [null], password: [null],
staySignedIn: [false,Validators.pattern(''true'')]});
}

En tu HTML:

<form [formGroup]="login" (ngSubmit)="onSubmit()">
    <div class="form-group">
        <input formControlName="userName" required>
    </div>
    <div class="form-group">
        <input formControlName="password" type="password" required>
    </div>
    <div>
        <label>
    <input formControlName="staySignedIn" checked="staySignedIn" type="checkbox"> bla
  </label>
    </div>
    <button type="submit">bla</button>
    <div >
        <a href>bla?</a>
    </div>
</form>

Answer 5

.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();
  }
}

Trabajando Plunker .

Por favor, hágamelo saber si se requiere algún cambio.

Answer 6

<h1>LOGIN</h1>
<form [formGroup]="signUpForm"> 
    <input type="checkbox" formControlName="cb">
    <button type="submit" [disabled]="!loginForm.valid" (click)="doLogin()">Log in</button>
</form>

export class Login { 
  public signUpForm: FormGroup;

  constructor(fb: FormBuilder) {
    this.signUpForm = fb.group({
      cb: [false, Validators.requiredTrue]
    });
  }
  doLogin() {

  }
}