第一次编辑或修改字段时,表单验证不起作用

时间:2018-09-20 07:06:51

标签: angular forms validation ionic3 angular-reactive-forms

我正在使用表单生成器来验证我的反应式表单,但是当我第一次编辑ion-input时,它并没有验证该字段,而当我再次单击该字段时,它正在验证为什么会这样?这是我的代码

<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>
</form>

.ts文件

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   : ['']
      });
    }

我还在附上一张图片,您可以在其中看到离子输入的类别已针对第一个字段进行了更改,但未显示验证。 enter image description here

0 个答案:

没有答案