Javascript Angular 7:mat select无法在反应窗体中没有ngModel的情况下设置默认选项

在我的Angular 7应用程序下；我在用某种反应形式

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

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

我的表单包含一些输入和一些mat 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>

• 我还尝试将其绑定为：

  [（value）]=“selectedModeTransfert”

所有这些都不起作用

---

建议？？？

当您需要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>

状态=[
{名称：'Arizona'，缩写：'AZ'}，
{名称：'California'，缩写：'CA'}，
{名称：'Colorado'，缩写：'CO'}，
{名称：'纽约'，缩写：'纽约'}，
{名称：'Pennsylvania'，缩写：'PA'}，
];
表单=新表单组({
state:newformcontrol（this.states[3].abbrev），
});
{{state.name}

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

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

---

希望这能有所帮助。

不幸的是，我正在使用form builder语法，我已经更新了问题以使其更清晰。有什么原因不能在formBuilder中有空字符串的位置放置值吗？我尝试过：modeTransfert:[this.myData[0].value]，在尝试在initFormConfig（）函数中调用this.myData之前，是否填充了该数据？在

initFormConfig

中，如果在创建表单之前

console.log（）

输出了该值，它是否显示了所需的默认选项？如果这样做有效，那么您可能需要创建一个小型stackblitz来演示您的问题？

  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>