未验证select选项的Angular 6或2+表单验证

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

@Component({
  selector: 'app-my-form',
  template: `
    <form [formGroup]="myForm" (ngSubmit)="onSubmit()">
      <div>
        <label for="country">Country:</label>
        <select id="country" formControlName="country" required>
          <option value="">Select a country</option>
          <option *ngFor="let country of countries" [value]="country">{{ country }}</option>
        </select>
        <div *ngIf="myForm.get('country').invalid && (myForm.get('country').dirty || myForm.get('country').touched)">
          <div *ngIf="myForm.get('country').errors?.required">
            Country is required.
          </div>
        </div>
      </div>
      <button type="submit" [disabled]="myForm.invalid">Submit</button>
    </form>
  `
})
export class MyFormComponent {
  myForm: FormGroup;
  countries = ['USA', 'Canada', 'UK', 'Australia'];

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

  onSubmit() {
    if (this.myForm.valid) {
      console.log('Form submitted:', this.myForm.value);
    } else {
      console.log('Form is invalid');
    }
  }
}

<select id="country" formControlName="country" required>
  <option value="">Select a country</option>
  <option *ngFor="let country of countries" [value]="country">{{ country }}</option>
</select>