Anfordern eines Kontrollkästchens, das überprüft werden soll

Möchte ich eine Schaltfläche deaktiviert, bis Sie eine checkbox aktiviert wurde mit einem FormBuilder für Eckige. Ich will nicht, um explizit zu überprüfen, den Wert der checkbox und bevorzugen ein validator so, ich kann einfach überprüfen form.valid.

In beiden Fällen Validierung unten die checkbox

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

InformationsquelleAutor der Frage nathasm | 2016-02-17

  1. 2

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

    Arbeiten Plunker.

    Bitte lassen Sie mich wissen, wenn irgendwelche änderungen notwendig sind.

    InformationsquelleAutor der Antwort micronyks

  2. 42

    Konnte man nur mit einem ValidatorPattern und überprüfen auf der rechten Seite (boolean) Wert:

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

    und hier ist die Bindung:

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

    InformationsquelleAutor der Antwort Mica

  3. 20

    Seit 2.3.1 Winkel - können Sie Prüfungen#requiredTrue:

    Komponente:

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

    Vorlage:

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

    InformationsquelleAutor der Antwort developer033

  4. 10

    Fand ich, dass der Validator.erforderlich funktioniert nicht richtig für die Checkboxen.
    Wenn Sie das Kontrollkästchen ein Kontrollkästchen und deaktivieren Sie es, die FormControl, wird immer noch als gültig, obwohl es deaktiviert ist. Ich denke, es wird nur geprüft, dass Sie es auf etwas, sei es wahr oder falsch ist.

    Hier ist eine schnelle einfache Prüfung, die Sie hinzufügen können, um Ihre FormControl:

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

    InformationsquelleAutor der Antwort Maxim

  5. 1

    Habe ich diese wirklich einfache Beispiel:

    In der Komponente:

    login : FormGroup;

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

    In Ihre 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 der Antwort Valentin Bossi

Schreibe einen Kommentar