web-dev-qa-db-fra.com

Afficher le message de validation lors de l'envoi dans Angular 4 formes réactives

J'utilise Angular 4, Formulaires réactifs. Je souhaite afficher un message d'erreur de validation lorsque l'utilisateur clique sur le bouton Soumettre/Créer un compte. Voici le code HTML et TypeScript que j’utilise. 

<form [formGroup]="signupForm" (ngSubmit)="onSubmit()">

  <div class="form-group">
    <input type="text" 
           id="firstname" 
           name="firstname" 
           formControlName="firstname" 
           placeholder="First Name">
    <span *ngIf="!signupForm.get('firstname').valid && signupForm.get('firstname').touched" 
           class="help-block"> Please Enter First Name (Minimum 2 Characters)</span>
  </div>

  <div class="form-group">
    <input type="text" 
           id="lastname" 
           name="lastname" 
           formControlName="lastname" 
           placeholder="Last Name">
    <span *ngIf="!signupForm.get('lastname').valid && signupForm.get('lastname').touched" 
           class="help-block"> Please Enter Last Name (Minimum 2 Characters)</span>
  </div>

  <div class="form-group">
    <button type="submit" 
            class="btn btn-success btn-lg btn-qte">Create Account</button>
  </div>

</form>

CODE DE SCRIPT DE TYPE

export class UserRegistrationComponent implements OnInit {
    signupForm: FormGroup;

    ngOnInit() {
        this.signupForm = new FormGroup({
            'firstname': new FormControl(null, [Validators.required, Validators.minLength(2)]),
            'lastname': new FormControl(null, [Validators.required, Validators.minLength(2),]),
            'businessname': new FormControl(null),
            'phonenumber': new FormControl(null, [Validators.required]),
            'email': new FormControl(null, [Validators.required, Validators.email]),
            'password': new FormControl(null, [Validators.required]),
            'confirmpassword': new FormControl(null, Validators.required)

        });
    }

    onSubmit() {
        console.log(this.signupForm)
    }

}
angularformstypescriptangular-reactive-forms
3
Tayyab Rahman

Quelque chose comme

onSubmit() {
    console.log(this.signupForm)
    this.signupForm.controls['firstname'].markAsTouched()
}
9
user3733648

Pour obtenir les propriétés telles que touched, dirty, valid du contrôle de formulaire via formGroup, utilisez:

signupForm.controls.firstname.touched. De la même manière, vous pouvez obtenir les autres propriétés telles que valide et non valide.

si vous avez créé un objet individuel de FormControl, vous pouvez accéder aux propriétés de cet objet en tant que firstname.touched sans utiliser formGroup.

pour plus d'informations sur la validation dans les formulaires dirigés par modèle, voir Validations de formulaire piloté par modèle ici.

1
Ankit