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

，可以通过使用Angular的响应式表单和自定义验证器来实现。

首先，我们需要在组件的HTML模板中定义两个select元素，并使用ngModel指令将它们与组件中的属性进行绑定。例如：

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

接下来，我们需要在组件的类中定义select1和select2属性，并创建一个自定义验证器函数来检查这两个属性的值是否相同。自定义验证器函数应该返回一个验证错误对象，如果验证通过则返回null。例如：

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;
  }
}

在上面的代码中，我们使用了Angular的响应式表单和FormBuilder来创建一个表单组，并将自定义验证器函数传递给表单组的validator属性。在自定义验证器函数中，我们获取select1和select2的值，并比较它们是否相同。如果不相同，则返回一个包含selectsNotEqual属性的验证错误对象。

最后，我们可以在模板中使用formGroup和formControlName指令来绑定表单和验证器。例如：

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

在上面的代码中，我们使用formGroup指令将表单与组件中的form属性进行绑定，并使用formGroupName指令将表单组与selects属性进行绑定。然后，我们使用formControlName指令将每个select元素与相应的表单控件进行绑定。最后，我们使用*ngIf指令根据验证错误的存在与否来显示错误消息。

这样，当用户选择不同的选项时，表单将显示一个错误消息，并且提交按钮将被禁用，直到两个选项的值相同为止。

腾讯云相关产品和产品介绍链接地址：