FormControlName Ionic 5.9.1和Angular 12

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

@Component({
  selector: 'app-root',
  templateUrl: 'app.component.html',
  styleUrls: ['app.component.scss']
})
export class AppComponent {
  form: FormGroup;

  constructor(private fb: FormBuilder) {
    this.form = this.fb.group({
      username: ['', Validators.required],
      password: ['', Validators.required]
    });
  }

  onSubmit() {
    if (this.form.valid) {
      console.log(this.form.value);
    }
  }
}

<!-- app.component.html -->
<form [formGroup]="form" (ngSubmit)="onSubmit()">
  <ion-item>
    <ion-label>Username</ion-label>
    <ion-input formControlName="username"></ion-input>
  </ion-item>
  <div *ngIf="form.get('username').invalid && (form.get('username').dirty || form.get('username').touched)">
    <div *ngIf="form.get('username').errors.required">Username is required.</div>
  </div>

  <ion-item>
    <ion-label>Password</ion-label>
    <ion-input formControlName="password" type="password"></ion-input>
  </膜>
  <div *ngIf="form.get('password').invalid && (form.get('password').dirty || form.get('password').touched)">
    <div *ngf="form.get('password').errors.required">Password is required.</div>
  </div>

  <ion-button expand="full" [disabled]="!form.valid" type="submit">Submit</ion-button>
</form>