如何绑定反应形式，即formcontrolname和ngmodel in angular

问题描述

这是代码:

list.component.html

list.component.html

<form nz-form [formGroup]="taskFormGroup" (submit)="saveFormData()">
        <div nz-row *ngFor="let remark of checklis>
          <div nz-col nzXXl="12" *ngFor="let task of remark.tasks" style="padding: .5rem;">
<nz-form-item>
                  <nz-form-control>
                    <nz-radio-group formControlName="status" name="status" (change)="onChangeStatus($event)">
                      <label nz-radio nzValue="true">Passed</label>
                      <label nz-radio nzValue="false">Failed</label>
                    </nz-radio-group>
                  </nz-form-control>
                </nz-form-item>
</div>
</div>
</form>

list.component.ts

list.component.ts

checklist = [
    {
      "id": "txv3vvBr8KYB",
      "assetType": {
        "id": "1fKBO4w0XHg7H",
        "code": "PRD",
        "name": "Printing1"
      },
      "tasks": [
        {
          "id": "1fKBO4w0XHg7H",
          "name": "Task 1",
          "description": "Check oil spill"
        },
        {
          "id": "ESOSA6aCrOER",
          "name": "Sample1",
          "description": "Desc1"
        }
      ]
    },
    {
      "id": "EwQciw9whx6B",
      "tasks": [
        {
          "id": "1nU7uASqfvLPD",
          "name": "TASK8888",
          "description": "DESC8888"
        },
        {
          "id": "EwQciw9whx6B",
          "name": "TASK9999",
          "description": "DESC9999"
        }
      ]
    }
  ];

constructor (private fb: FormBuilder) {}

createTaskFormGroup() {
    const DATA = this.asset;

    return this.fb.group({
      remark: DATA || '',
      status: ['', [Validators.required]]
    });
  }

onChangeStatus(ev: any) {
    console.log(ev);
}

如何修复

选择通过或失败时，出现一个错误，即无法分配为仅读取对象'[object Object]'的属性'id'

When selecting on the passed or failed, there's an error which is Cannot assign to read only property 'id' of object '[object Object]'

推荐答案

将(change)更改为(ngModelChange)事件.

<nz-radio-group formControlName="status" name="status" (ngModelChange)="onChangeStatus($event)">

文档: https://ng.ant.design/components/radio/en#nz-radio-group

这篇关于如何绑定反应形式，即formcontrolname和ngmodel in angular的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！