Angular 7：mat-select 无法在 ReactiveForm 中没有 ngModel 的情况下设置默认选项

Posted 2023-03-13

【中文标题】Angular 7：mat-select 无法在 ReactiveForm 中没有 ngModel 的情况下设置默认选项

【英文标题】：Angular 7 : mat-select cannot set default option without ngModel in a ReactiveForm

【发布时间】：2019-06-19 14:43:47

【问题描述】：

在我的 Angular 7 应用下；我正在使用一些反应形式。

我的反应形式是这样初始化的：

private initFormConfig() 
    return this.formBuilder.group(
      modeTransfert: [''],
      modeChiffrement: [''],
    );
  

我的表单包含一些输入和一些 ma​​t-select ：

<div class="form-inline form-group">
          <label class="col-md-2 justify-content-start">URL Cible</label>
          <input  id="urlCible"
                  type="text"
                  maxlength="200"
                  ngDefaultControl
                  formControlName="urlCible"
                  class="col-md-6 form-control"/>
        </div>

        <div class="form-inline form-group">
          <label class="col-md-2 justify-content-start">Mode de transfert</label>
          <mat-form-field class="col-md-3" color="warn">
            <mat-select placeholder="Selectionner le mode de transfert"
                        id="modesTransfert"
                        [(value)]="selectedModeTransfert"
                        ngDefaultControl
                        formControlName="modeTransfert">
              <mat-option *ngFor="let modeTr of modeTransfertData"
                          [value]="modeTr.value">
                modeTr.viewValue
              </mat-option>
            </mat-select>
          </mat-form-field>
        </div>

我正在尝试为选择输入设置初始默认值：但我正在努力解决两件事：

事实上在 Angular 7 中不赞成使用带有 ngFormControl（反应形式）的 ngModel

像这样修补其价值的事实：

this.addPefForm.patchValue('modeTransfert': this.modeTransfertData[0].value);

最初无法在 onInit 或 AfterViewChecked 挂钩中完成，因为这会导致此错误：

ParametragePefAdministrationFormComponent.html:107 ERROR Error: ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: 'mat-selected: false'. Current value: 'mat-selected: true'.
    at viewDebugError (core.js:20342)
    at expressionChangedAfterItHasBeenCheckedError (core.js:20330)
    at checkBindingNoChanges (core.js:20432)
    at checkNoChangesNodeInline (core.js:23305)
    at checkNoChangesNode (core.js:23292)
    at debugCheckNoChangesNode (core.js:23896)
    at debugCheckRenderNodeFn (core.js:23850)
    at Object.eval [as updateRenderer] (ParametragePefAdministrationFormComponent.html:107)
    at Object.debugUpdateRenderer [as updateRenderer] (core.js:23839)
    at checkNoChangesView (core.js:23193)

我也试过用这个绑定它：[(value)]="selectedModeTransfert"

所有这些都不起作用。

建议？？

【参考方案1】：

当您需要 mat-select 的默认值时，您需要在启动响应式表单时指定它，例如。

  states = [
    name: 'Arizona', abbrev: 'AZ',
    name: 'California', abbrev: 'CA',
    name: 'Colorado', abbrev: 'CO',
    name: 'New York', abbrev: 'NY',
    name: 'Pennsylvania', abbrev: 'PA',
  ];

  form = new FormGroup(
    state: new FormControl(this.states[3].abbrev),
  );

<mat-select formControlName="state">
    <mat-option *ngFor="let state of states" [value]="state.abbrev">
        state.name
    </mat-option>
</mat-select>

现在，当您的 *ngFor 值将与 FormControl 中提供的值匹配时。

这也是显示从 API 检索到的数据以使用收集的数据自动填充字段的方式。

希望这会有所帮助。

【讨论】：

不幸的是我正在使用表单生成器语法，我已经更新了问题以使其更清晰

有什么理由不能在 formBuilder 中有空字符串的地方放置一个值？

我试过了：modeTransfert: [this.myData[0].value],

在您尝试在 initFormConfig() 函数中调用 this.myData 之前，是否已填充数据？

在您的initFormConfig 中，如果您在创建表单之前console.log() 输出了值，它会显示所需的默认选项吗？如果可行，那么您可能需要创建一个小型堆栈闪电战来展示您的问题？