1
votes

Comment afficher les messages d'erreur de validation des formulaires réactifs

Salut les gars,

J'ai du mal à faire un validateur pour une entrée de nom, je viens de répondre au code du wiki angulaire et ne fonctionne toujours pas.

Pourriez-vous s'il vous plaît m'aider à trouver le problème?

Merci de conseiller.

Mon code HTML:

 formAlta: FormGroup;
 ngOnInit() {
    this.formAlta = new FormGroup({
      idPro: new FormControl(),
      documentTypePro: new FormControl(),
      namePro: new FormControl('',[Validators.required]),
      rProfessional: new FormControl(this.tipusPro),
      firstSurnamePro: new FormControl(),
      secondSurnamePro: new FormControl(),
      businessNamePro: new FormControl(),
      idCli: new FormControl(),
      documentTypeCli: new FormControl(),
      nameCli: new FormControl('',Validators.required),
      rClient: new FormControl(this.tipusCli),
      firstSurnameCli: new FormControl(),
      secondSurnameCli: new FormControl(),
      businessNameCli: new FormControl(),
      idPermis: new FormArray([]),
      dateFiPermis: new FormArray([])
    });
  }

Et mon composant TS

  <form [formGroup]="formAlta" (ngSubmit)="addRepresentacio()">
            <div class="form-group">
              <label for="namePro">Nom</label>
              <input id="namePro" class="form-control" formControlName="namePro" placeholder="Nom del professional" required>
              <div *ngIf="namePro.invalid && (namePro.dirty || namePro.touched)" class="alert alert-danger form-danger" role="alert">

        <div *ngIf="namePro.errors.required">
            El Nom del professional es obligatori
        </div>
    </div></form>

typescript angular angular-reactive-forms angular5

2 commentaires

Avez-vous une erreur?

Pouvez-vous décrire ce qui ne fonctionne pas?

3 Réponses :

4
votes

Vous devez créer une méthode getter dans votre component.ts comme suit pour obtenir le contrôle de formulaire dans le modèle

<div *ngIf="formAltaControls.namePro.invalid && (formAltaControls.namePro.dirty || formAltaControls.namePro.touched)" class="alert alert-danger form-danger" role="alert">

    <div *ngIf="formAltaControls.namePro.errors.required">
        El Nom del professional es obligatori
    </div>

Dans votre composant.html

get formAltaControls(): any {
   return this.formAlta['controls'];
}

2 commentaires

Merci, je n'ai pas remarqué que je l'ai oublié :)

@Bear, vous pouvez utiliser dans le .html directement formAlta.get('namePro') ou formAlta.controls.namePro pour faire référence au contrôle. Astuce, utilisez l'opérateur "safe" pour obtenir l'erreur formAlta.get('namePro').errors?.required

3
votes

Je pense que tu dois changer ton code avec quelque chose comme ça

  <form [formGroup]="formAlta" (ngSubmit)="addRepresentacio()">
        <div class="form-group">
          <label for="namePro">Nom</label>
          <input id="namePro" class="form-control" formControlName="namePro" placeholder="Nom del professional" required>
          <div *ngIf="formAlta.controls['namePro'].invalid && (formAlta.controls['namePro'].dirty || formAlta.controls['namePro'].touched)" class="alert alert-danger form-danger" role="alert">

    <div *ngIf="formAlta.controls['namePro'].errors.required">
        El Nom del professional es obligatori
    </div>
</div></form>

0 commentaires

0
votes

Votre champ de saisie peut ressembler à ci-dessous si vous entrez vide

En html, vous pouvez utiliser ci-dessous comme

  this.basicInfoForm = this.formBuilder.group({
      firstName: new FormControl("Enter First Name", [Validators.required, Validators.pattern(this.PAT_NAME)])  

  });

Dans le fichier .ts , vous pouvez utiliser ci-dessous comme

<form class="brown-text" [formGroup]="basicInfoForm">
           <input type="text"  class="form-control"  formControlName="firstName" [ngClass]="{ 'is-invalid': (basicInfoForm.controls.firstName.errors) || (!basicInfoForm.controls.firstName.pristine && basicInfoForm.controls.firstName.invalid) }">
               
                <!-- Validation messages -->
              <div class="invalid-feedback"  *ngIf="(basicInfoForm.controls.firstName.errors) || (!basicInfoForm.controls.firstName.pristine && basicInfoForm.controls.firstName.invalid)">
              <div *ngIf="basicInfoForm.controls.firstName.errors">Name is required</div>
              <div *ngIf="basicInfoForm.controls.firstName.errors">Only Alphabets with space  between 2 to  20   characters</div>
            </div>
   <form>

0 commentaires