0

我正在尝试在 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 的绑定是只读的，但我不知道为什么或如何修复它。

4

3 回答 3

1

根据FormControl 的 Angular.io 文档， “值”属性是只读的。

您应该使用 formcontrol.setValue() 方法来更改 formcontrol 的值

于 2020-02-15T15:18:38.403 回答
0

你不能简单地使用'='符号为formcontrol赋值，你必须选择，即你必须使用setValue方法或patchValue方法，我建议你使用patchValue方法，因为当你使用setValue方法时你必须更改表单中的每个表单控件。所以你尝试这样的事情......

this.searchForm.patchValue({
    name: data.name,
    status: data.status
});`
于 2020-02-15T18:58:16.453 回答
0

我遇到了同样的问题，我使用本机选择并添加 matNativeControl 来修复它。

<mat-form-field style="width: 100%;">
   <mat-label>Status</mat-label>
   <select matNativeControl formControlName="status">
      <option *ngFor="let status of statusList" [value]="status">
         {{status | labelit}}
      </option>
   </select>
   <mat-error *ngIf="agentForm.hasError('required')">Please choose a Status</mat-error>
</mat-form-field>
于 2020-08-03T21:17:32.723 回答