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

【问题标题】：how to disable the elements of particular row in the formGroup in angular如何以角度禁用formGroup中特定行的元素
【发布时间】：2020-07-01 14:54:41
【问题描述】：

您好，我需要禁用通过复选框选择的特定行，我尝试了下面的代码，但它不起作用，所以请帮助我，谢谢。

html文件代码：

 <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文件代码：

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

此代码在模态弹出窗口中，如下图所示：

【问题讨论】：

因此，当您单击选择复选框时，您需要显示突出显示的字段（仅限精确索引字段）。该选择复选框也在您的 ngFor 中。我的理解正确吗？
@Vignesh 我已更新问题错过了选择复选框我想根据复选框启用/禁用特定行

标签： html angular angular6 angular7

【解决方案1】：

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

我希望这和你需要的一样。只需将上面的代码复制并粘贴到https://stackblitz.com/ 你很容易理解。

【讨论】：

【解决方案2】：

您可以完全通过模板做到这一点： More info here

一个大大简化的例子：

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

【讨论】：