Question

这是代码

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;
    }
  }

我在这里想要做的是在文本区域中显示注释（可选）或注释（必需）。如果通过，则应在文本区域占位符中显示备注（可选）。

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

在此示例中，有两个项目

这是

样品1（项目1）

示例2（项目2）

然后，我在样本1上选择传递的内容，然后显示备注（可选），该备注也显示在样本2的文本区域上。如何解决？

预先感谢

Answer 1

要使文本框根据广播具有不同的占位符，您将需要管理标记，该标记将监视各个广播的变化。

1。根据{{1}}数据填充标志数组。

checklist

2。设置html模板以使用此标志数组

  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');
      }
    }
  }

3。更改操作标志

<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>

Demo

如何修复广播组不会影响角度

1 个答案: