如何在Angular 6中验证提交表单时的输入

Question

在我的Angular应用程序中，我设置了表单验证器，但是我想要的是在onSubmit上完成表单验证。 因此，当用户单击提交，并且表单无效时，将显示ngIf错误。 到目前为止，我的代码是：

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
    });
  }
}

Answer 1

要在模板级别进行保护，您可以使用

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

在组件级别，它像这样

onSubmit() {
  if(this.serviceForm.invalid) {
    this.serviceForm.setErrors({ ...this.serviceForm.errors, 'yourErrorName': true });
    return;
  }
}

Answer 2

您可以使用updateOn属性来告诉角度上运行验证功能submit 。

只需添加属性（也可以将其应用于formControl或formArray ）：

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

并且也不要忘记保护您的提交功能：

onSubmit() {
    if (this.serviceForm.valid) {
        ...
    }
}