时间戳

首页 > 解决方案 > 如何修复无线电组不会影响角度中的其他项目

angular - 如何修复无线电组不会影响角度中的其他项目

问题描述

这是代码

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" (ngModelChange)="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>

    <nz-form-item>
      <nz-form-control>
        <textarea nz-input placeholder="{{ remarkPlaceHolder }}" class="remarks-textarea" type="text"
          name="otherRemark"></textarea>
      </nz-form-control>
    </nz-form-item>
</div>
</div>
</form>

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) {}


  onChangeStatus(event: any) {
    switch (event) {
      case true:
        this.otherRemark = '';
        this.remarkPlaceHolder = 'Remarks (optional)';
        break;
      case false:
        this.remarkPlaceHolder = 'Remarks (required)';
        break;
      default: break;
    }
  }

我在这里尝试做的是在 textarea 中显示备注（可选）或备注（必需）。如果它通过了，它应该在 textarea 占位符中显示备注（可选）。

问题是当我选择通过或失败时，它也会影响其他项目。

例如，有两个项目

哪一个是

样品 1（项目 1）

样品 2（项目 2）

然后我选择通过样品 1 然后它显示备注（可选）它也显示在样品 2 文本区域。如何解决？

提前致谢

标签： angulartypescriptforms

解决方案

要根据收音机使文本框具有不同的占位符，您需要管理标志，该标志将监控各个收音机的变化。

1. 根据checklist数据填充标志数组。

  textBoxStatus: string[][] = [];

  constructor(private fb: FormBuilder) {
    this.taskFormGroup = this.fb.group({
      remark: "",
      status: ["", [Validators.required]]
    });

    for (let parent of this.checklist) {
      this.textBoxStatus.push([]);
      for (let child of parent.tasks) {
        this.textBoxStatus[this.textBoxStatus.length - 1].push('false');
      }
    }
  }

2.设置html模板使用这个标志数组

<form nz-form [formGroup]="taskFormGroup" (submit)="saveFormData()">
    <div nz-row *ngFor="let remark of checklist; let parent=index">
        <hr>
    Parent {{parent}}
        <hr>
        <div nz-col nzXXl="12" *ngFor="let task of remark.tasks; let child=index" style="padding: .5rem;">
            <hr>
      Child {{parent}}.{{child}}
      <hr>
            <nz-form-item>
                <nz-form-control>
                    <nz-radio-group formControlName="status" name="status" (ngModelChange)="onChangeStatus($event, parent, child)">
                        <label nz-radio nzValue="true">Passed</label>
                        <label nz-radio nzValue="false">Failed</label>
                    </nz-radio-group>
                </nz-form-control>
            </nz-form-item>

            <nz-form-item>
                <nz-form-control>
                    <textarea nz-input placeholder="{{ textBoxStatus[parent][child] == 'true' ? 'Remarks (optional)' : 'Remarks (required)' }}" class="remarks-textarea" type="text"
          name="otherRemark"></textarea>
                </nz-form-control>
            </nz-form-item>

        </div>
    </div>
</form>

3.改变行动标志

onChangeStatus(event: string, parent: number, child: number) {
  this.textBoxStatus[parent][child] = event;
}

演示

推荐阅读