Как проверить реактивную форму при отправке?

Question

Я использую реактивную форму для своего заявления. Я хочу проверить форму при отправке, но я не могу этого сделать. Вот мой код, может кто-нибудь сообщить мне, что я делаю неправильно или отсутствует.

Это моя форма Builder

import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams,ViewController,LoadingController, Events,AlertController } from 'ionic-angular';
import {Validators, FormBuilder, FormGroup, FormControl } from '@angular/forms';
import { MyinfoService} from '../../../../providers/app-services/myinfo/myinfo.service';

private formBuilder: FormBuilder) {
      this.licenseinfo = navParams.get('licenseinfo');
      this.startDate = this.licenseinfo.dlIssued_date;
      this.expiryDate= this.licenseinfo.dlExpiry_date;
      console.log(this.startDate);
      this.todo = this.formBuilder.group({
        issued_state  : ['', Validators.required],
        license_no    : ['', Validators.required],
        name          : ['', Validators.required],
        status        : ['Pending'],
        issued_date   : ['',Validators.required],
        expiry_date   : ['',Validators.required],
        address_line1 : ['',Validators.required],
        address_line2 : [''],
        city          : ['',Validators.required],
        zipcode: ['',Validators.required],
        state  : ['',Validators.required],
        employee_id   : ['']
      });
    }

Это моя форма

<ion-header>

    <ion-navbar>
      <ion-buttons start>
        <button ion-button (click)="dismiss()">Close</button>
      </ion-buttons>
      <ion-title>License Info Edit</ion-title>
    </ion-navbar>

  </ion-header>


  <ion-content padding>  
    <form [formGroup]="todo" (ngSubmit)="saveMyinfoLicenseinfo()">
      <ion-item>
        <ion-label stacked class="requiredLabel"> State Issued By</ion-label>
        <ion-input value="{{licenseinfo.issued_state}}" formControlName="issued_state"></ion-input>
      </ion-item> 

      <ion-item>
        <ion-label stacked class="requiredLabel">Driver Lic. No</ion-label>
        <ion-input type="text" value="{{licenseinfo.driver_lic_no}}" formControlName="license_no"></ion-input>
      </ion-item>

      <ion-item>
        <ion-label stacked class="requiredLabel">Name on DL</ion-label>
        <ion-input value="{{licenseinfo.name}}" formControlName="name"></ion-input>
      </ion-item>

      <ion-item>
        <ion-label stacked class="requiredLabel">Date Issued</ion-label>
        <ion-datetime displayFormat="MMM DD, YYYY" pickerFormat="DD MMM YYYY" formControlName="issued_date" [(ngModel)]="startDate" ></ion-datetime>
      </ion-item>

      <ion-item>
        <ion-label stacked class="requiredLabel">Expiry Date</ion-label>
        <ion-datetime displayFormat="MMM DD, YYYY" pickerFormat="DD MMM YYYY" formControlName="expiry_date" [(ngModel)]="expiryDate" ></ion-datetime>
      </ion-item>

      <ion-item>
          <ion-label stacked class="requiredLabel">Address Line1</ion-label>
          <ion-input value="{{licenseinfo.address_line1}}" formControlName="address_line1"></ion-input>
        </ion-item>

      <ion-item>
          <ion-label stacked >Address Line2</ion-label>
          <ion-input value="{{licenseinfo.address_line2}}" formControlName="address_line2"></ion-input>
        </ion-item>
      <ion-item>
          <ion-label stacked class="requiredLabel">City</ion-label>
          <ion-input value="{{licenseinfo.city}}" formControlName="city"></ion-input>
        </ion-item>

      <ion-item>
          <ion-label stacked class="requiredLabel">State</ion-label>
          <ion-input value="{{licenseinfo.issued_state}}" formControlName="issued_state"></ion-input>
        </ion-item>

        <ion-item>
          <ion-label stacked class="requiredLabel">Zipcode</ion-label>
          <ion-input value="{{licenseinfo.zipcode}}" formControlName="zipcode"></ion-input>
        </ion-item>

      <ion-input value="{{employee_id}}" formControlName="employee_id" hidden></ion-input>
      <ion-row>
        <ion-col>
          <button ion-button type="button" color="dark" outline block margin-top (click)="dismiss()">Cancel</button>
        </ion-col>
        <ion-col>
          <button ion-button type="submit" color="dark" margin-top block>Save</button>
        </ion-col>
      </ion-row>
    </form>
  </ion-content>

Это мой код для отправки:

saveMyinfoLicenseinfo(){
    if(this.todo.valid){
    let loading = this.loadingCtrl.create({});
    loading.present();
    this.myinfoService.saveLicenseDetails(this.todo.value).subscribe(data => {
      loading.dismiss();        
        if(data.isSuccessful){
          this.viewCtrl.dismiss(true);
        }
        else
          this.viewCtrl.dismiss(false);
      });
      this.submitted = true;
    }
    else{
      this.validateAllFields(this.todo);
    }
}
validateAllFields(formGroup: FormGroup) {         
  Object.keys(formGroup.controls).forEach(field => {  
      const control = formGroup.get(field);            
      if (control instanceof FormControl) {             
          control.markAsTouched({ onlySelf: true });
          console.log(3);
      } else if (control instanceof FormGroup) {        
          this.validateAllFields(control);  
          console.log(this.validateAllFields(control));
      }
  });
}

так что я вызываю onsubmit для этой функции, и если форма недействительна, то я пытаюсь сделать все поля в касании, но цвет полей не меняется даже после отправки. Могу ли я знать, это правильный путь? или есть лучший способ сделать это?

Answer 1

Ваши недопустимые поля формы не меняют цвет при отправке, потому что вы, кажется, не настроили CSS (или классы CSS) для полей с недопустимыми значениями.

Взгляните на Подтверждение реактивной формы в разделе Angular Docs для примеров:

1. как получить информацию о валидности каждого поля в шаблоне и
2. как добавить HTML для отображения ошибок рядом с формой (при желании)

Директива ngClass может быть очень полезна для динамического присвоения определенного класса недопустимому полю формы. Затем вы можете кодировать соответствующий CSS в прилагаемом файле CSS или использовать любые классы, которые Ionic может предоставить специально для недопустимых записей формы.

Answer 2

попробуйте этот HTML-код.

<form [formGroup]="todo" #f="ngForm" (ngSubmit)='saveMyinfoLicenseinfo()' novalidate>

        <ion-item class="Your css class">
            <ion-input type="text"  formControlName="name"></ion-input>
        </ion-item>
        <div *ngIf="f.submitted && todo.controls.name.errors?.required" class="Error class ">Please enter Name</div>            


        <ion-item>
            <button ion-button outline>GO</button>
        </ion-item>

</form>

Answer 3

Вы неправильно определили валидаторы, проверьте официальную документацию, она вам поможет Проверка формы

Правильный способ сделать это так:

this.heroForm = new FormGroup({
  'name': new FormControl(this.hero.name, [
    Validators.required,
    Validators.minLength(4),
    forbiddenNameValidator(/bob/i) // <-- Here's how you pass in the custom validator.
  ]),
  'alterEgo': new FormControl(this.hero.alterEgo),
  'power': new FormControl(this.hero.power, Validators.required)
});