Ionic 3表单验证问题求助：两处异常情况排查

Hey everyone, I'm hitting two weird roadblocks with form validation in my Ionic 3 app and could really use some help sorting them out!

The Problems I'm Facing #

1. Required field validation only triggers on the second blur: When I tab out of an empty required input for the first time, it shows up as valid (no ng-invalid class applied). Only when I tab out again does it finally mark the field as invalid with the correct styling. I need it to show the invalid state right after the first blur.
2. Validation state doesn't update after setting value via code: When I use a method to programmatically set a value to the required input, the field still stays in the ng-invalid state—even though the value is now present. The validation doesn't re-run automatically to reflect the new value.

My Environment Configuration #

• Ionic CLI: 3.20.0
• Ionic Framework: 3.9.5
• Angular Core: 5.2.10
• Node.js: 10.19.0
• npm: 6.14.4

Relevant Code Snippets #

home.ts

import { Component } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {
  myForm: FormGroup;

  constructor(private formBuilder: FormBuilder) {
    this.initForm();
  }

  private initForm(): void {
    this.myForm = this.formBuilder.group({
      requiredInput: ['', Validators.required],
      optionalInput: ['']
    });
  }

  populateInput(): void {
    // Method to set input value programmatically
    this.myForm.controls.requiredInput.setValue('Sample text');
  }
}

home.html

<ion-header>
  <ion-navbar>
    <ion-title>Validation Test</ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
  <form [formGroup]="myForm">
    <ion-list>
      <ion-item>
        <ion-label floating>Required Input</ion-label>
        <ion-input type="text" formControlName="requiredInput"></ion-input>
      </ion-item>
      <div *ngIf="myForm.get('requiredInput').invalid && (myForm.get('requiredInput').dirty || myForm.get('requiredInput').touched)" class="error">
        This field cannot be empty!
      </div>

      <button ion-button block (click)="populateInput()">Set Input Value</button>
    </ion-list>
  </form>
</ion-content>

Screenshot Observations #

• First blur on empty required input: Input appears valid, no error message displayed
• Second blur on empty required input: Input gets ng-invalid class, error message shows up correctly
• After clicking "Set Input Value": Input has text but still retains the ng-invalid class, error message stays visible

I've checked the form control's touched and dirty states, but can't wrap my head around why the validation is acting this way. Any tips or fixes would be a huge help!

内容的提问来源于stack exchange，提问作者Thiago Vieira Da Paz