在Angular 9中验证两个selects的相同值

<select [(ngModel)]="select1">
  <option value="option1">Option 1</option>
  <option value="option2">Option 2</option>
  <option value="option3">Option 3</option>
</select>

<select [(ngModel)]="select2">
  <option value="option1">Option 1</option>
  <option value="option2">Option 2</option>
  <option value="option3">Option 3</option>
</select>

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

@Component({
  selector: 'app-my-component',
  templateUrl: './my-component.component.html',
  styleUrls: ['./my-component.component.css']
})
export class MyComponent {
  select1: string;
  select2: string;
  form: FormGroup;

  constructor(private formBuilder: FormBuilder) {
    this.form = this.formBuilder.group({
      selects: this.formBuilder.group({
        select1: ['', Validators.required],
        select2: ['', Validators.required]
      }, { validator: this.validateSelects })
    });
  }

  validateSelects(control: AbstractControl): { [key: string]: any } | null {
    const select1Value = control.get('select1').value;
    const select2Value = control.get('select2').value;

    if (select1Value !== select2Value) {
      return { selectsNotEqual: true };
    }

    return null;
  }
}

<form [formGroup]="form">
  <div formGroupName="selects">
    <select formControlName="select1">
      <option value="">Select an option</option>
      <option value="option1">Option 1</option>
      <option value="option2">Option 2</option>
      <option value="option3">Option 3</option>
    </select>

    <select formControlName="select2">
      <option value="">Select an option</option>
      <option value="option1">Option 1</option>
      <option value="option2">Option 2</option>
      <option value="option3">Option 3</option>
    </select>

    <div *ngIf="form.get('selects').hasError('selectsNotEqual')">
      The selected options must be the same.
    </div>
  </div>
</form>