如何以角度禁用formGroup中特定行的元素

Question

Hi I need to disable particular row which is selected via checkbox , I tried below code but it isn't working so please help me with it thank you.

html file code:

 <form [formGroup]="myFormGroup">
 <div *ngFor="let item of bookingList1; let i = index;" >
  <div class="col-lg-2 col-md-2 col-sm-2 col-xs-2">
    <div class="form-group mb-10">
      <label class="formLabel">Select</label>          
      <input type="checkbox"  class='check' name ="chk_{{i}}"   
(click)="changeCheck(i,$event)" >
    </div>
  </div>
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 pl-0 pr-0">      
  <div class="col-lg-6 col-md-6 col-sm-6 col-xs-6">
    <div class="form-group mb-10" >                    
      <label class="formLabel">{{i}}</label>
      <input  format="{dd-MM-yyyy}" type="text" [attr.disabled]="index == checkindex ? true : false" (paste)="false" onkeydown="return false" (ngModelChange)="checkDirty()" placeholder="select start date and end date" 
      class="form-control bg-grey" #dp="bsDaterangepicker"
             bsDaterangepicker [(value)]="item.BsRangeDate" [bsConfig]="bsConfig"
             formControlName="Period_{{i}}" [placement]="'top'">
      <span class="glyphicon glyphicon-calendar glyicon" (click)="dp.toggle()" [attr.aria-expanded]="dp.isOpen"
            value="Toggle" style="top:36px"></span>
    </div>
  </div>
  <div class="col-lg-4 col-md-4 col-sm-4 col-xs-4">
    <div class="form-group mb-10">
      <label class="formLabel">{{checkindex}}</label>
      <input type="text" (change)="makeDirty()" [disabled]="disabledvar" class="form-control bg-grey" [(value)]="item.Hours" (focus)="mouseEnter() "
             (focusout)="mouseLeave()" formControlName="Hours_{{i}}">
    </div>
  </div>
  <div class="col-lg-2 col-md-2 col-sm-2 col-xs-2">
    <div class="form-group mb-10">
      <label class="formLabel">Unconfirmed</label>
      <input type="checkbox" (change)="makeDirty()" [attr.disabled]="disablerow" class="check" [(ngModel)]="item.Unconfirmed" [ngModelOptions]="{standalone:true}"          
      >

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

ts file code:

 changeCheck(index, args) {
debugger;
if (args.srcElement.checked) {
  alert("checkbox has been checked "+ index); 
  this.checkindex = index;
  this.disablerow = true;
  this.disabled = this.disabled + "" + index;
  this.disabledvar = true;
  this.myFormGroup.controls[index].disable();
  this.myFormGroup.get("Hours_");
  alert("checkbox has been checked " + index);
} else {
  //alert("checkbox has been unchecked " + index); 
  this.checkindex = index;
  this.disablerow = false;
  alert("checkbox has been unchecked " + index);
  this.disabledvar = false;
}
}

this code is in the modal popup as shown in the below image:

Answer 1

You can do that entirely through the template: More info here

A greatly simplified example:

<div *ngFor="let item of bookingList1; let i = index;" >
  . . .
    <!-- use the brackets to bind the disabled attribute of
         the inputs to the Unconfirmed property on the model --!>
    <input [disabled]='item.Unconfirmed' . . . />
  . . .
    <input type="checkbox" [(ngModel)]="item.Unconfirmed" />
  . . .
</div>

Answer 2

html:

<div class="box2" *ngFor="let item of numbers; let i = index;">
          <input type="checkbox" name=check{{i}} (change)="makeDirty(item)">

<label *ngIf="item.show == true">hi-{{i}}</label>
</div>

ts:

import { Component, HostBinding, HostListener } from "@angular/core";

@Component({
  selector: "my-app",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"]
})
export class AppComponent {
  numbers = [{ id: 1, name: "list1" }, { id: 2, name: "list2" }];

  makeDirty(item) {
    item.show = !item.show;
  }
}

i hope this is just same like what you need . Just copy and paste above code in https://stackblitz.com/ you can easily understand.