J'essaie d'appliquer la validation de formulaire réactif. Mais ça ne marche pas. Donner l'erreur "La propriété 'email' n'existe pas sur le type 'AppComponent'." le code source est sur ce lien https:/ /stackblitz.com/edit/angular-ivy-y3hup7?file=src/app/app.component.html

0
Raman 7 oct. 2020 à 09:56

1 réponse

Meilleure réponse

Vous devez accéder aux contrôles de formulaire dans un groupe en utilisant la méthode get signupForm.get('email').

Avoir bifurqué votre slackblitz avec la solution appliquée https://stackblitz.com/edit/ angular-ivy-lciego?file=src/app/app.component.html

<form [formGroup]="signupForm" (ngSubmit)="onSubmit();">
  <div class="form-group">
    <label for="email">Email address:</label>
    <input type="email" formControlName="email" name='email' class="form-control" id="email" required >
    <div *ngIf="signupForm.get('email').invalid && 
                (signupForm.get('email').dirty || signupForm.get('email').touched)" class="alert alert-danger">

      <div *ngIf="signupForm.get('email')?.errors?.required">
        Email is required.
      </div>
      <div *ngIf="signupForm.get('email')?.errors?.email">
        Invalid email
      </div>
     
    </div>

  </div>
  <div class="form-group">
    <label for="pwd">Password:</label>
    <input type="password" formControlName="password" name='password' class="form-control" id="pwd" required  >
  </div>
  <button [disabled]="!signupForm.valid" type="submit" class="btn btn-primary">Submit</button>
</form>

<!-- <router-outlet></router-outlet> -->
1
Haroon 7 oct. 2020 à 10:00