Here's the code
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;
}
}
Trying to display optional or required remarks in textarea based on pass/fail. When selecting pass, it affects all items. How to fix this issue?
Example:
1. Sample 1
2. Sample 2
Choosing pass for Sample 1 displays optional remarks for both samples. How to resolve?
Thank you.