代码之家 › 专栏 › 技术社区 › firasKoubaa

角度7:mat select不能在ngmodel没有反应形式的情况下设置默认选项

angular-reactive-forms angular-material typescript angular javascript

-2

firasKoubaa · 技术社区 · 6 年前

在我的 角度7 app;我正在使用一些反应式表单。

我的创作形式是这样初始化的:

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

我的表单包含一些输入和一些 材料选择 以下内容:

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

我正试图设置select输入的初始默认值:但我在两个方面举步维艰:

事实上 在角度7中,使用ngmodel和ngformcontrol(reactive form)是相关的。
像这样修补它的价值:

this.addpefform.patchvalue({'modetransfert':this.modetransfertdata[0].value});

不能在 奥尼特 或者 查看后检查 钩子,因为这会导致此错误:

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 回复 | 直到 6 年前

Web Nexus 6 年前

当您需要mat select的默认值时,您需要在启动reactive form例如时指定它。

  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检索到的数据的方式,以便用收集到的数据自动填充字段。

希望这能有所帮助。