Dans mon application Angular, j'ai configuré mes validateurs de formulaire, mais ce que je veux, c'est que la validation du formulaire soit effectuée onSubmit. Ainsi, lorsque l'utilisateur clique sur soumettre et que le formulaire n'est pas valide, les erreurs ngIf s'affichent. Mon code pour l'instant est :

Component.ts

import { Component, OnInit } from '@angular/core';
import { ReactiveFormsModule } from '@angular/forms';
import { FormGroup, FormControl } from '@angular/forms';
import { Validators } from '@angular/forms';
import { FormBuilder } from '@angular/forms';
import { Request } from '../../models/request.model'
import { Router } from '@angular/router';
import { Observable } from 'rxjs';
import { AppComponent } from '../../../app.component';
import { ServicenowService } from '../../services/servicenow.service';
import { HttpClient, HttpEventType, HttpHeaders, HttpRequest, HttpResponse } from '@angular/common/http';


@Component({
  selector: 'app-service-request',
  templateUrl: './service-request.component.html',
  styleUrls: ['./service-request.component.scss']
})
export class ServiceRequestComponent implements OnInit {


  public loading = false;

  private customer_id = this.appComponent.customer_id;

  serviceForm;

  u_destination_country = [
    { value: 'Choose an option' },
    { value: 'United Kingdom', },
    { value: 'United States of America', },
    { value: 'Russia', },
    { value: 'Moscow', },
    { value: 'Africa', },
  ];

  users = [
    { id: 'Select an option', },
    { id: '1', },
    { id: '2', },
    { id: '3', },
  ];

  devices = [
    { id: 'Select an option', },
    { id: '1', },
    { id: '2', },
    { id: '3', },
  ];

  constructor(private service: ServicenowService,
    private appComponent: AppComponent,
    private router: Router,
    private http: HttpClient

  ) {
  }

  ngOnInit() {
    this.serviceForm = new FormGroup({
      customer_id: new FormControl(this.customer_id),
      //u_caller_id: new FormControl(this.users[0], Validators.required),
      siebel_id: new FormControl('', Validators.required),
      u_destination_country: new FormControl(this.u_destination_country[0], Validators.required),
      u_phone_number: new FormControl('', Validators.required),
      //u_serial_number: new FormControl(this.devices[0], Validators.required),
      u_short_description: new FormControl('', Validators.compose([
        Validators.required,
        Validators.minLength(5),
        Validators.maxLength(80)
      ])),
      u_message_description: new FormControl('', Validators.required),
    });
  }

  onSubmit() {
    this.http.post("/api/inc",
      this.serviceForm.value,
      {
        headers: new HttpHeaders().set("Content-Type", "application/json")
      }
    ).subscribe((response: any) => {
      console.log(response);//On success response
      this.router.navigate(['/incident/confirmation']);
    }, (errorResponse: any) => {
      console.log(errorResponse);//On unsuccessful response
    });
  }
}
2
Sole 8 mars 2019 à 13:17

2 réponses

Meilleure réponse

Pour protéger au niveau du modèle, vous pouvez utiliser

<button type="submit" [disabled]="serviceForm.invalid">Submit</submit>
<div class="error" *ngIf="serviceForm.hasError('yourErrorName')">
 Some text
</div>

Au niveau des composants, ça se passe comme ça

onSubmit() {
  if(this.serviceForm.invalid) {
    this.serviceForm.setErrors({ ...this.serviceForm.errors, 'yourErrorName': true });
    return;
  }
}
4
user4676340user4676340 8 mars 2019 à 10:23

Vous pouvez utiliser la propriété updateOn pour dire à Angular d'exécuter la fonction de validation sur submit.

Ajoutez simplement la propriété (qui peut aussi être appliquée à un formControl ou un formArray) :

this.serviceForm = new FormGroup({
     customer_id: new FormControl(this.customer_id),
         ...
}, { updateOn: 'submit' });

Et n'oubliez pas non plus de protéger votre fonction de soumission :

onSubmit() {
    if (this.serviceForm.valid) {
        ...
    }
}
1
Johan Rin 8 mars 2019 à 10:38