mat-select 值不适用于 formControlName答案

【问题标题】：mat-select value dosen't work with formControlNamemat-select 值不适用于 formControlName
【发布时间】：2019-11-14 21:12:39
【问题描述】：

我正在使用 mat-select ，我需要为其设置默认值。它可以工作，但是在向它添加 formControlName 后，它的默认值不显示。

我尝试了 [(ngModel)] 和 [(value)] 以及“mat-autocomplete”

<mat-form-field>
 <mat-select placeholder="پیش نمایش" 
   formControlName="lesson" 
     [value]="free_demo"
      (selectionChange)="onSelectDemo(i)">
      <mat-option [value]="demo.id"
       *ngFor="let demo of demos[i]">
        {{ demo.title }}
       </mat-option>
   </mat-select>

【问题讨论】：

标签： angular angular-material

【解决方案1】：

如果您使用“formControlName”，您可以访问 TS 文件中的控制器并设置如下值：

this.yourFormName.controls['lesson'].setValue('your value or' + this.dynamicValue )

【讨论】：

我尝试了一个简单的输入并将其命名为 formControlName="lesson" 并添加 subProduct.controls.lesson.setValue(result.sub_products[i].lesson) 。有用。但是在mat-select 中它不起作用
那么您分配给每个选项的值是从您的对象 demos[i] 派生的，并且您正在尝试设置某些结果的子对象的值。如果两个对象不相同，则 setValue Data 可能与 mat select 上的任何值都不匹配。最好给我们提供 .ts 和对象值。
但是当我删除 `formControlName="lesson"` 并给出一个静态值时，它确实有效！问题在于 formControlName
stackblitz.com/edit/… - mat select 设置值的小副本。如果您遵循了相同的过程并且它不起作用，则可能存在语法之外的一些其他错误来设置值，必须对其进行彻底的代码审查。
我的代码是正确的！但我不知道是什么问题！顺便说一句，我使用mat-outocomplete insted of mat-select 解决了这个问题！ tnx 为您的回复老兄:)

【解决方案2】：

在使用响应式表单时，我建议您使用setValue() 或patchValue() 方法设置/更新您的FormControl。您可以通过here 阅读更多相关信息。

这是您可以使用 patchValue 更新表单值的一种方式。假设对象的 id 为1，

this.editProductForm.patchvalue({
  sub_products: [{
    lesson: '1'
  }]
});

在您的 component.ts 上，

<mat-form-field>
 <mat-select placeholder="پیش نمایش" 
   formControlName="lesson" 
   (selectionChange)="onSelectDemo(i)">
   <mat-option [value]="demo.id" *ngFor="let demo of demos[i]">
     {{ demo.title }}
   </mat-option>
 </mat-select>
</mat-form-field>

【讨论】：

其实我是这样做的，但它也不起作用，const subProducts = this.editProductForm.get('sub_products') as FormArray; subProduct.controls.lesson.setValue(result.sub_products[i].lesson);
我已经更新了我的答案。这将为 sub_products FormArray 中的第一个 FormControl 设置值
我在 Sub_product FormArray 中有 4 个 formControl
我尝试了一个简单的输入并将其命名为 formControlName="lesson" 并添加了 subProduct.controls.lesson.setValue(result.sub_products[i].lesson) 。有用。但是在mat-select 中它不起作用
@mahsayadegari 只是为了检查一下，为什么ngfor 上有一个demos[i]？不应该只是demos吗？

【解决方案3】：

当您不使用 formControlName 并将静态 [value] 设置为默认值时，它会变成一个完全不同的场景，mat-select 不再是表单的成员，并且 you just set the value manually，所以 formControlName 什么都不做，只是将现有 FormGroup 中的 FormControl 按名称同步到表单控件元素，如果您在 FromControl 的构造函数中定义默认值但什么也没发生，所以您必须检查默认值的comparison 的类型以及您为每个mat-option 定义为值的值，因为mat-select 使用自己的ControlValueAccessor，或者您可以通过传递function to [compareWith] input 来实现自己的。 (پیش نمایش؟؟ :))

【讨论】：

【解决方案4】：

我遇到了同样的问题。确保使用 MatSelectModule 的正确导入更新您的组件模块。

import {MatSelectModule} from '@angular/material/select';

@NgModule({
  imports: [
    ....
    MatSelectModule,
  ],
}

不幸的是，错误信息并不能自我解释。

【讨论】：