Angular Material => 从 formControlName 中设置 mat-select 的值答案

【问题标题】：Angular Material => set value of mat-select from formControlNameAngular Material => 从 formControlName 中设置 mat-select 的值
【发布时间】：2020-02-02 13:12:34
【问题描述】：

我的角度版本是 7。我正在创建一个表单，其中有一个下拉选择来选择一个选项。我的列表正在用于选择，但是当我加载页面时它没有显示预定义的值。该页面采用编辑用户数据的形式。下面是我的html代码，

<ng-container matColumnDef="name">
    <mat-header-cell *matHeaderCellDef>Server Name</mat-header-cell>
    <mat-cell *matCellDef="let row; let index = index" [formGroupName]="index">
        <mat-form-field>
            <!-- <input class="jminput" matInput formControlName="name" autocomplete="off"> -->
            <mat-select matSelect [formControl]="name">
                <mat-option *ngFor="let item of arr" value="item">{{item}}</mat-option>
            </mat-select>
            <mat-error *ngIf="name.touched && !name.required">
                Server Name is required
            </mat-error>
        </mat-form-field>
    </mat-cell>
</ng-container>

当我使用<input> 代替<mat-select> 时，它会起作用并显示初始值。所以我认为 formControlName="name" 工作正常。但它不适用于<mat-select>。

请提出建议。

【问题讨论】：

你在初始化 Control 的时候设置了什么？此值必须是 arr 数组的元素。
您还应该共享组件代码。你如何设置初始值？

标签： html angular angular-material

【解决方案1】：

将value="item" 更改为[value]="item"

【讨论】：

@usersam，太好了，我很高兴能帮上忙。

【解决方案2】：

您使用了[formControl]="name" 而不是formControlName="name"。此控件的启动值设置必须是 arr 数组的元素。

【讨论】：