Angular中如何根据表单控件值条件渲染mat-select的multiple属性？

首先要明确：mat-select的multiple是组件的输入属性（@Input()），不是普通HTML属性，所以不能用[attr.multiple]绑定，必须用组件输入属性绑定[multiple]。你的第一种尝试方向正确，但问题出在没有处理单选/多选切换时的表单控件值类型差异，以及可能的初始值判断问题。

解决步骤： #

1. 正确绑定multiple属性
   在模板中使用组件输入属性绑定，建议通过组件类的getter简化模板逻辑，避免直接在模板中调用form.get()：

   <mat-select formControlName="queries" [multiple]="isMultiple">
     <mat-option *ngFor="let option of queryOptions" [value]="option.value">
       {{ option.label }}
     </mat-option>
   </mat-select>
   

2. 在组件类中定义判断逻辑与值监听
   由于单选和多选的表单值类型不同（单选为单个值，多选为数组），切换multiple状态时必须重置控件值，否则会导致组件渲染异常或控件状态错误：

   import { Component } from '@angular/core';
   import { FormBuilder, FormGroup } from '@angular/forms';
   
   @Component({
     selector: 'app-your-component',
     templateUrl: './your-component.component.html'
   })
   export class YourComponent {
     ticketForm: FormGroup;
     queryOptions = [
       { value: 'req1', label: '服务请求1' },
       { value: 'req2', label: '服务请求2' },
       { value: 'req3', label: '服务请求3' }
     ];
   
     // 通过getter封装判断逻辑
     get isMultiple(): boolean {
       return this.ticketForm.get('queryType')?.value === 'Service Request';
     }
   
     constructor(private fb: FormBuilder) {
       // 初始化表单
       this.ticketForm = this.fb.group({
         queryType: [''],
         queries: [''] // 初始为单选值类型
       });
   
       // 监听queryType变化，同步更新queries控件的类型与值
       this.ticketForm.get('queryType')?.valueChanges.subscribe(queryType => {
         const queriesControl = this.ticketForm.get('queries');
         if (queryType === 'Service Request') {
           // 切换为多选，重置为数组类型
           queriesControl?.setValue([]);
         } else {
           // 切换为单选，重置为单个值类型
           queriesControl?.setValue('');
         }
       });
     }
   }
   

为什么你的尝试失败： #

• 第一种方法：没有处理单选/多选切换时的控件值类型差异，当queryType切换为Service Request时，queries控件仍为单个值，导致mat-select无法正确渲染多选状态。
• 第二种方法：错误使用[attr.multiple]绑定DOM属性，而multiple是mat-select组件的输入属性，必须用[multiple]绑定组件的输入属性才能生效。

内容的提问来源于stack exchange，提问作者Clinton Hadrian