web-dev-qa-db-fra.com

Angular, Désactiver le bouton d'envoi en utilisant [disabled] pour vérifier la validité du formulaire

J'essaie de désactiver un bouton d'envoi en utilisant la vérification de condition [disable]=form.controls[...].invalid. Le bouton d'envoi doit être désactivé s'il existe un champ de saisie vide ou invalid. Mais on dirait que je le fais mal. Le bouton est désactivé lorsque je remplis certains champs et laisse certains champs vides, à l'exception du premier champ de saisie. Lorsque j'ai rempli le premier champ de saisie, le bouton devient activé (alors que les autres champs de saisie sont encore vides ou invalid).

//component.ts
form01: FormGroup;
public myDatePickerOptions: IMyDpOptions = {
  dateFormat: 'dd-mmm-yyyy',
};

setDate(): void {
  let date = new Date();
  this.form01.patchValue({
    DoB: {
      date: {
        year: date.getFullYear(),
        month: date.getMonth() + 1,
        day: date.getDate()
      }
    }
  });
}

clearDate(): void {
  this.form01.patchValue({
    DoB: null
  });
}

constructor(public builder: FormBuilder) {
  this.form01 = this.builder.group({
    email: [null, Validators.required], //text
    DoB: [null, Validators.required], //radio button
    gender: [null, Validators.required], //date picker
  });
}

results: object = new Object();
functionForm01() {
  this.results = [{
    {
      "email": this.form01.controls.email.value
    },
    {
      "DoB": this.form01.controls.DoB.value
    },
    {
      "gender": this.form01.controls.gender.value
    }
  }]
  console.log(this.result);

  this.form01.reset();
}
<!--component.html-->
<div>
  <form [formGroup]="form01">
    email:<input type="text" name="email" formControlName="email" required/> gender:
    <input type="radio" name="gender" formControlName="gender" value="male"> male<br>
    <input type="radio" name="gender" formControlName="gender" value="female"> female<br> DoB:
    <my-date-picker name="DoB" [options]="myDatePickerOptions" formControlName="DoB" required></my-date-picker>

    <button type="submit" [disabled]="form01.controls['email' || 'DoB' || 'gender'].invalid" (click)="functionForm01()">Click</button>
  </form>
</div>

J'utilise Angular TypeScript et le package myDatePicker de this link . Quelqu'un peut-il m'aider s'il-vous-plaît?

htmlangulartypescriptform-control
2
Wira Xie

Vous pouvez activer/désactiver le bouton en vérifiant la validité de votre formulaire:

<button type="submit" [disabled]="!disableBtn">Click</button>

Dans votre composant:

let disableBtn = false;
this. form01.valueChanges 
            .subscribe((changedObj: any) => {
                 this.disableBtn = this. form01.valid;
            });

Ou via HTML:

<button type="submit" [disabled]="!form01.valid (click)="functionForm01()">Click</button>
3
moohkooh

Puisque vous avez votre objet formGroup, vous pouvez désactiver le bouton si form01 n'est pas valide.

<!--component.html-->
    <div>
      <form [formGroup]="form01">
        email:<input type="text" name="email" formControlName="email" required/> gender:
        <input type="radio" name="gender" formControlName="gender" value="male"> male<br>
        <input type="radio" name="gender" formControlName="gender" value="female"> female<br> DoB:
        <my-date-picker name="DoB" [options]="myDatePickerOptions" formControlName="DoB" required></my-date-picker>

    <button type="submit" [disabled]="!form01.valid" (click)="functionForm01()">Click</button>

      </form>
    </div>
6
Abdul-Razak Adam

Vous devez importer FormsModule dans app.module.ts sous imports import {FormsModule, ReactiveFormsModule} à partir de '@ angular/forms';

@NgModule({
imports: [
     FormsModule      
])}
0
Nilesh Sutar