angular - 角<mat-select>组件不在 FormGroup 上工作</mat-select>

问题描述

我正在尝试在 formGroup 中使用，但尽管它构建了组件并且我可以浏览选项，但我无法选择其中任何一个。加载页面时，我可以看到此错误：

错误类型错误：“this._selectionModel.onChange 未定义”

这是我的 component.ts ：

@Component({
  selector: 'app-agent',
  templateUrl: './agent.component.html',
  styleUrls: ['./agent.component.css']
})
export class AgentComponent implements OnInit {

  agents = [];
  durationInSeconds = 5;
  statusList = ['AVAILABLE', 'NOT_AVAILABLE'];
  agentForm = new FormGroup ({
    name: new FormControl(),
    status: new FormControl(this.statusList[0]),
  });
  searchForm = new FormGroup(
    {key: new FormControl()}
  );

  constructor(private agentService: AgentService) { }

  ngOnInit(): void {
    this.getAll();
  }

  filter(): void {
    if (this.searchForm.value.key) {
      this.getOne();
    } else {
      this.getAll();
    }
  }

  save(): void {
    this.agentService.save(new AgentData(this.agentForm.value.name, this.agentForm.value.status)).subscribe((data) => {
      this.agentForm.value.name = data.name;
      this.agentForm.value.status = data.status;
    }
    );
  }
}

这是组件 html 部分：

        <form [formGroup]="agentForm" (submit)="save()">
          <table class="form-group" style="width: 100%; ">
            <div class="row" >
              <mat-form-field style="width: 100%; ">
                <mat-label>Agent name</mat-label>
                <input matInput placeholder="Ex. fferchichi" formControlName="name">
              </mat-form-field>
            </div>

            <div class="row">
              <mat-form-field style="width: 100%;">
                <mat-label>Status</mat-label>
                <mat-select formControlName="status">
                  <mat-option *ngFor="let status of statusList" [value]="status">
                    {{status | labelit}}
                  </mat-option>
                </mat-select>
                <mat-error *ngIf="agentForm.hasError('required')">Please choose a Status</mat-error>
              </mat-form-field>
            </div>

            <div class="row" style="text-align: right;">
              <input type="submit" class="btn btn-default" value="Save"/>
            </div>

          </table>
        </form>

感觉与 formControl 的绑定是只读的，但我不知道为什么或如何修复它。

标签： angularangular-materialmaterial-designangular9

angular - 角组件不在 FormGroup 上工作

问题描述

解决方案

推荐阅读