Exigeant une case à cochée

Je veux un bouton sera désactivé jusqu'à ce qu'une case à cocher a été vérifié à l'aide d'un FormBuilder Angulaire. Je ne veux pas explicitement vérifier la valeur de la case et préfèrent utiliser un validateur pour que je puisse vérifier simplement form.valid.

Dans les deux cas de validation ci-dessous la case à cocher 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);
  }
}

Quel est donc le problème, votre deuxième version fonctionne très bien [ false, Validators.required ].
Dans le second cas, pour moi au moins, le this.form.value est { cb: false } et this.form.valid est true
Regardez la réponse. this.form.valid n'est pas plustrue.
Maintenant, vous pouvez utiliser Validators.requiredTrue

InformationsquelleAutor nathasm | 2016-02-17

0

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

S'il vous plaît laissez-moi savoir si les changements requis.
- Alors deux choses. Tout d'abord, vous avez required dans le code HTML qui est vraiment ce que j'essayais d'éviter. Mais de l'enlever pour votre plnkr continuera de fonctionner comme prévu. Cependant, la plnkr est à l'aide de la bêta.0. Si vous supprimez le required en HTML et de les déplacer à la bêta.6, cela ne fonctionne plus. Cela peut être un bug Angulaire.
- Donc, après quelques recherches autour de l'angle de dépôt github, le bon correctif pour ce qui est de ne pas définir la case de la valeur à false, mais " à la place. Donc, avec la bêta.6 la manière correcte est cb: ['', Validators.required]. Si vous modifiez votre réponse, je vais le marquer comme étant correcte.
- lorsque j'ai posté ma réponse, sans les modifier, je l'ai mis avec ' '.Mais comme vous pouvez le vérifier cela fonctionne aussi très bien avec pas de problème. Vous pouvez le marquer comme un aswer. Je vais le mettre à jour avec // cb:[' ',Validators.required]. ainsi, les autres utilisateurs seront en mesure de voir d'autres façons d'utiliser validator.required.
- Vous avez besoin d'utiliser Validators.requiredTrue pour qu'il fonctionne correctement. Sinon, si vous cochez et décochez il sera encore "valide".
InformationsquelleAutor micronyks
63

Vous pouvez simplement utiliser un ValidatorPattern et vérifier la droite (boolean) valeur:
```
<input type="checkbox" [formControl]="myForm.controls['isTosRead']">
```
et voici la liaison:
```
this.myForm = builder.group({
        isTosRead: [false, Validators.pattern('true')]
    });
```
- C'est la meilleure réponse à mon humble avis. Aussi il est possible d'utiliser formControlName="isTosRead" plutôt que [formControl]="...".
- C'est génial! Fonctionne très bien pour moi Angulaire 4
- C'est la réponse correcte.
InformationsquelleAutor Mica

Depuis Angulaire 2.3.1 vous pouvez utiliser Validateurs#requiredTrue:

Composant:

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

Modèle:

<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>

STACKBLITZ DÉMO

Les validateurs.requiredTrue est la clé!
Les validateurs.requiredTrue ne fonctionne pas pour moi Angulaire 5
S'il vous plaît, développez pourquoi il ne fonctionne pas pour vous.

InformationsquelleAutor developer033

10

J'ai trouvé que le Validateur.requis ne fonctionne pas correctement pour les cases à cocher.
Si vous cochez une case, puis décochez la case, le FormControl montrent encore comme valide, même si elle n'est pas cochée. Je pense qu'il vérifie seulement que vous la définissez à quelque chose, que ce soit vrai ou faux.

Voici un rapide simple validateur vous pouvez ajouter à votre FormControl:
```
  mustBeChecked(control: FormControl): {[key: string]: string} {
    if (!control.value) {
      return {mustBeCheckedError: 'Must be checked'};
    } else {
      return null;
    }
  }
```
- Vous pouvez vous Validators.requiredTrue au lieu de Validators.required.
InformationsquelleAutor Maxim

<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() {

  }
}

Ce doit être la réponse valable

InformationsquelleAutor Javier González

2

Cela a été résolu dans Angulaire de la version 2.3.0.

Suffit d'utiliser:
Validators.requiredTrue instead of Validators.required.
- Bonjour et Bienvenue à Débordement de Pile. S'il vous plaît ne pas utiliser jpavel commentaire comme le votre réponse, d'autant plus pour une vieille question.
InformationsquelleAutor Pran R.V

J'ai ce vraiment simple exemple:

Dans votre composant:

login : FormGroup;

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

Dans votre code 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>

InformationsquelleAutor Valentin Bossi

Vous devez vous connecter pour publier un commentaire.