如何获取 ngFor/ngIf 中选中的复选框值？

*ngFor当您在 内部（或 内部）使用模板引用变量时，@for“范围”与此循环相关。

这是什么意思？你使用“相同”的变量名（在代码中checkBoxId）

<ng-container *ngFor="let item of list; let i = index;">
     <div class="grid">
           <mat-checkbox *ngIf="item.id > 4;" #checkBoxId
                         value="false"
                         type="checkbox">
           </mat-checkbox>
           <!-- you can use--->
           {{checkboxId.checked}}

           <mat-form-field *ngIf="item.id > 4 && checkBoxId.checked">
                 <input formControlName="{{item.name}}" matInput 
                     type="number"/>
            </mat-form-field>
</ng-container>
          

注意：当您使用 ReactiveFormsControls 时不要使用“value”，只需为 formControl 赋予值。

更新正如评论中所指出的（感谢 @Dozobus 的建议），当 mat-check 位于 *ngIf 下时会出现问题。我们可以用以下方法替换 *ngIf[style.display]="i<=4?'non':null"

或使用

<form [formGroup]="form">
  <ng-container *ngFor="let control of  form.controls|keyvalue;let i=index" >
    <mat-form-field *ngIf="items[i].id<=4">
      <input matInput [formControlName]="items[i].name" />
    </mat-form-field><br/>
    <ng-container *ngIf="items[i].id>4">
      <section>
        <mat-checkbox class="example-margin" #checkinId>Check me!</mat-checkbox>
      </section>
      <mat-form-field *ngIf="checkinId.checked">
        <input matInput [formControlName]="items[i].name" />
      </mat-form-field>
    </ng-container>
  </ng-container>
</form>

注意：在提交时我们需要考虑这个 mat-checkbox，我们可以使用一些类似的

//use ViewChildren to "reach" the checkboxes
@ViewChildren('checkinId') checkboxes!:QueryList<MatCheckbox>

submit()
{
    const data={...this.form.value}
    this.items.forEach((x:any,index:number)=>{
       if (x.id>4)
       {
         const checkBox=this.checkboxes.find((_,i:number)=>i==index-4) 
         if (checkBox && !checkBox.checked)
             data[x.name]=""
       }
    })
    ...do something with "data"
}

注2：在stackblitz中，我提出了不同的方法来处理这个问题，使用新的@for和@if

您需要将复选框状态存储在数组或对象中，并相应地更新表单字段的可见性。

 export class MyComponent {
      List: Array<{ id: number; name: string; checked?: boolean }> = [
        { id: 1, name: 'somename' },
        { id: 5, name: 'anothername' },
        // Add more items as needed
      ];
    
      // Tracks the state of checkboxes for items with id > 4
      checkboxStates: { [key: string]: boolean } = {};
    
      // Initialize checkboxStates with false values
      constructor() {
        this.List.forEach(item => {
          if (item.id > 4) {
            this.checkboxStates[item.name] = false; // Initial state unchecked
          }
        });
      }
    
      // Method to handle checkbox change
      onCheckboxChange(name: string, event: any) {
        this.checkboxStates[name] = event.checked;
      }
    }

在模板中，您将使用 Angular 的 [(ngModel)] 或 (change) 事件来跟踪复选框的状态并根据该状态绑定表单字段可见性。

<ng-container *ngFor="let item of List; let i = index;">
  <div class="grid">

    <mat-checkbox *ngIf="item.id > 4"
                  [(ngModel)]="checkboxStates[item.name]"
                  (change)="onCheckboxChange(item.name, $event)">
      {{ item.name }}
    </mat-checkbox>

    <mat-form-field *ngIf="item.id <= 4">
      <input formControlName="{{item.name}}" matInput type="number" />
    </mat-form-field>

    <mat-form-field *ngIf="item.id > 4 && checkboxStates[item.name]">
      <input formControlName="{{item.name}}" matInput type="number" />
    </mat-form-field>

  </div>
</ng-container>

重构我的答案

好吧，我之前的回答需要在提交时检查复选框的值。我们可以利用这一点，当 formControl 被禁用时，form.value 会忽略此 formControl。

因此，首先禁用一个指令

@Directive({
  selector:'input[disabled]',
  standalone:true

})
export class DisabledDirective
{
  @Input('disabled') set _(value:boolean)
  {
    this.control && this.control.control && 
              this.control.control[value?'disable':'enable']()
  }
  constructor(@Optional() private control:NgControl){}
}

这是必要的，因为我们需要使用这些方法disable来enable禁用/启用 formControl。

我更喜欢“items”数组有一个“optional”属性，因此可以是，例如

items=[{id:1,name:'input1'},{id:2,name:'input2'},{id:3,name:'input3'},
       {id:4,name:'input4',optional:true},{id:5,name:'input5',optional:true}]

我们创建 formGroup 为

form=new FormGroup(this.items.reduce((a:any,item:any)=>{
    a[item.name]=new FormControl({value:'',disabled:item.optional});
    return a
  },{}));

好吧，我们可以有一个像这样的 .html（看到我们禁用了控件，而是放在 *ngIf 下

<form [formGroup]="form">
  <ng-container *ngFor="let control of  form.controls|keyvalue;let i=index" >
    <mat-form-field *ngIf="!items[i]?.optional">
      <input matInput [formControlName]="items[i].name" />
    </mat-form-field><br/>
    <ng-container *ngIf="items[i]?.optional">
      <section>
        <mat-checkbox class="example-margin" #checkinId>Check me!</mat-checkbox>
      </section>
      <mat-form-field >
        <input matInput [formControlName]="items[i].name" 
               [disabled]="!checkinId.checked"/>
      </mat-form-field>
    </ng-container>
  </ng-container>
</form>

拼图的最后一块是添加 component.css

.mat-form-field-disabled{
  display: none;
}

一场堆栈闪电战