不要自动选中所有复选框 - Angular Material 复选框

Question

我正在使用带有选项的动态表单，该选项允许用户为向他们提出的某个问题添加注释，前提是他们仅选中问题之前的复选框。我确实有 10 个问题，所以也分别有 10 个复选框。我现在的问题是当我选中一个复选框时，所有其他复选框都会自动选中。即使用户只需要检查一个，我如何才能避免自动检查所有复选框的情况？我实际上是角度和这种角度材料的新手。请帮我解决这个问题。任何帮助将不胜感激。

这是我的 app.component.html

 <section class="section" *ngFor="let inputSection of inputs.sections">
    <div class="section-content" *ngFor="let field of inputSection.fields; let i = index;">


      <ng-container *ngIf="field.type === 'text'" >
        <h5>{{field.label}}</h5>
        <div class="box-text-field">
          <mat-checkbox [(ngModel)]="showhidenote" [checked]="field.id"></mat-checkbox>
          <mat-form-field appearance="fill">
            <mat-label>{{field.placeholder}}</mat-label>
            <input matInput [name]="field.name" value="" [required]="field.required">
          </mat-form-field>
        </div>

        <div class="note-container" *ngIf="showhidenote">
            <mat-card class="note-container-form">
              <div class="arrow-up"></div>
              <mat-form-field>
                <input matInput type="text" placeholder="Note:" [(ngModel)]="value">
                <button mat-button *ngIf="value" matSuffix mat-icon-button aria-label="Clear" (click)="value=''">
                  <mat-icon>close</mat-icon>
                </button>
              </mat-form-field>
           </mat-card>
        </div>

      </ng-container>


      <ng-container *ngIf="field.type === 'link'">
        <h5>{{field.label}}</h5>
        <div>
          <button mat-raised-button [name]="field.name" [value]="field.value">Link</button>
        </div>
      </ng-container>

      <ng-container *ngIf="field.type === 'radio'">
        <h5>{{field.label}}</h5>
        <div>
          <mat-radio-group>
            <mat-radio-button *ngFor="let radioField of field.values" [name]="field.name" [value]="radioField.value" [required]="field.required">{{radioField.label}}</mat-radio-button>
          </mat-radio-group>
      </div>
      </ng-container>

      <ng-container *ngIf="field.type === 'file'">
        <h5>{{field.label}}</h5>
        <div>
          <input [name]="field.name" type="file" [required]="field.required">
        </div>
      </ng-container>

      <ng-container *ngIf="field.type === 'date'">
          <h5>{{field.label}}</h5>
          <div class="box-text-field">
            <mat-checkbox></mat-checkbox>
            <mat-form-field appearance="fill">
              <mat-label>{{field.placeholder}}</mat-label>
              <input matInput [matDatepicker]="picker" [name]="field.name" [required]="field.required">
              <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
              <mat-datepicker #picker></mat-datepicker>
            </mat-form-field>
          </div>
      </ng-container>

      <div class="section-content-full" style="width: 46vw; height: 100%;">
        <ng-container *ngIf="field.type === 'textarea'">
          <h5>{{field.label}}</h5>
            <div class="box-text-field box-textarea-field">
              <mat-checkbox [(ngModel)]="showhidenote"></mat-checkbox>
              <mat-form-field appearance="fill" >
                <mat-label>{{field.placeholder}}</mat-label>
                <textarea matInput [name]="field.name" value="" [required]="field.required"></textarea>
              </mat-form-field>
            </div>


          <div class="note-container" *ngIf="showhidenote">
              <mat-card class="note-container-form">
                <div class="arrow-up"></div>
                <mat-form-field>
                  <input matInput type="text" placeholder="Note:" [(ngModel)]="value">
                  <button mat-button *ngIf="value" matSuffix mat-icon-button aria-label="Clear" (click)="value=''">
                    <mat-icon>close</mat-icon>
                  </button>
                </mat-form-field>
              </mat-card>
            </div>
        </ng-container>
      </div>
    </div>
  </section>

  <!-- BUTTONS -->

  <div class="button-row">
    <button class="button-cancel" mat-raised-button>Cancel</button>
    <button class="button-reject" mat-raised-button>Reject</button>
    <button class="button-submit" mat-raised-button>Submit</button>
  </div>
</div>

这是我的 app.component.ts

    import { Component, OnInit } from '@angular/core';
    import { input as inputs } from './constants/template-forms';

    @Component({
      selector: 'app-root',
      templateUrl: './app.component.html',
      styleUrls: ['./app.component.css']
    })
    export class AppComponent {
      title = 'form-builder';

      panelOpenState = false;
      showhidenote = false;
      selected = -1;

      inputs = inputs;
      constructor(){
      console.log(this.inputs);

      }
    };

这是我在 app.conponent.ts 中导入的 json 文件（第 2 行）

    export const input = {
      "certificate_info" : {
        "form_name" : "California Resale Certificate",
        "certificate_id" : 1,
        "certificate_form_type" : "Resale",
        "certificate_jurisdiction" : "CA"
      },
      "sections" : [
        {
          "settings" : {
            "columns" : 2
          },
          "fields" : [
            {
              "label" : "1. I hold the valid seller's permit number",
              "name" : "sellers_number",
              "placeholder" : "Seller's Permit Number",
              "type" : "text",
              "required" : true,
              "snippet_image" : "",
              "id" : 1
            },
            {
              "label" : "1A. Verification Portal",
              "name" : "verification_portal",
              "type" : "link",
              "required" : false,
              "value" : "https://google.com",
              "snippet_image" : ""
            }
          ]
        },
        {
          "settings" : {
            "columns" : 2
          },
          "fields" : [
            {
              "label" : "1B. Valid and Matches to Seller",
              "name" : "radio_valid_match",
              "type" : "radio",
              "required" : true,
              "snippet_image" : "",
              "values" : [
                {
                  "label" : "Yes",
                  "value" : "1"
                },
                {
                  "label" : "No",
                  "value" : "0"
                }
              ]
            },
            {
              "label" : "1C. Validation Record",
              "name" : "validation_record",
              "type" : "file",
              "required" : true,
              "snippet_image" : ""
            }
          ]
        },
        {
          "settings" : {
            "columns" : 1
          },
          "fields" : [
            {
              "label" : "2. I am engaged in the business of selling the following type of the tangible personal property",
              "name" : "tangible_personal_property",
              "placeholder" : "Type of Tangible Personal Property",
              "type" : "textarea",
              "required" : true,
              "snippet_image" : "",
              "id" : 2
            }
          ]
        },
        {
          "settings" : {
            "columns" : 2
          },
          "fields" : [
            {
              "label" : "3. This certificate is for the purchase from",
              "name" : "certificate_purchase_from",
              "placeholder" : "Vendor's Name",
              "type" : "text",
              "required" : true,
              "snippet_image" : "",
              "id" : 3
            }
          ]
        },
        {
          "settings" : {
            "columns" : 1
          },
          "fields" : [
            {
              "label" : "5. Description of property to be purchased for resale",
              "name" : "property_description",
              "placeholder" : "Description of Property",
              "type" : "textarea",
              "required" : true,
              "snippet_image" : "",
              "lines" : 3,
              "id" : 4
            }
          ]
        },
        {
          "settings" : {
            "columns" : 2
          },
          "fields" : [
            {
              "label" : "6A. Name of purchaser",
              "name" : "purchaser_name",
              "placeholder" : "Name of Purchaser",
              "type" : "text",
              "required" : true,
              "snippet_image" : "",
              "id" : 5
            }
          ]
        },
        {
          "settings" : {
            "columns" : 1
          },
          "fields" : [
            {
              "label" : "6B. Signature or purchaser, purchaser's employee or authorized representative",
              "name" : "radio_valid_match",
              "type" : "radio",
              "required" : true,
              "snippet_image" : "",
              "values" : [
                {
                  "label" : "Signed",
                  "value" : "1"
                },
                {
                  "label" : "Not Signed",
                  "value" : "0"
                }
              ]
            }
          ]
        },
        {
          "settings" : {
            "columns" : 2
          },
          "fields" : [
            {
              "label" : "6C. Printed Name of Person Signing",
              "name" : "person_signing",
              "placeholder" : "Person Signing",
              "type" : "text",
              "required" : true,
              "snippet_image" : "",
              "id" : 6
            },
            {
              "label" : "6D. Title",
              "name" : "title",
              "placeholder" : "Title",
              "type" : "text",
              "required" : true,
              "snippet_image" : "",
              "id" : 7
            }
          ]
        },
        {
          "settings" : {
            "columns" : 1
          },
          "fields" : [
            {
              "label" : "6E. Address of Purchaser",
              "name" : "purchaser_address",
              "placeholder" : "Address of Purchaser",
              "type" : "textarea",
              "required" : true,
              "snippet_image" : "",
              "id" : 8
            }
          ]
        },
        {
          "settings" : {
            "columns" : 2
          },
          "fields" : [
            {
              "label" : "6F. Telephone Number",
              "name" : "telephone_number",
              "placeholder" : "Telephone Number",
              "type" : "text",
              "required" : true,
              "snippet_image" : "",
              "id" : 9
            },
            {
              "label" : "6G. Date",
              "name" : "date",
              "placeholder" : "Choose a Date",
              "type" : "date",
              "required" : true,
              "snippet_image" : "",
              "id" : 10
            }
          ]
        }
      ]
    };

下面是我制作的表格截图

这是我表单中问题的截图

Answer 1

这不是一个错误，它是复选框的工作方式。只需使用 Id 将每个复选框与其他复选框区分开来。就像您想更改复选框的 ID 一样，即 myCheckbox、myCheckbox1、myCheckbox2....

我正在更新我的答案，这对你有用，我在每个 Json 对象中动态添加了额外的字段，即checkedFlag，这将帮助你了解选中了哪个复选框。正如我所说，您需要为复选框保留唯一 ID。我已经保留了该代码。请参阅

<section class="section" *ngFor="let inputSection of inputs.sections; let 
currentIndex = index;">
  <div class="section-content" *ngFor="let field of inputSection.fields; let 
i = index;">

 <ng-container *ngIf="field.type === 'text'">
    <h5>{{field.label}}</h5>
    <div class="box-text-field">
    <mat-checkbox class="toolbar-checkbox" [(ngModel)]="field.checkedFlag" 
 id="checkBox{{i}}{{currentIndex}}">
      MyCheckbox
    </mat-checkbox>

    <mat-form-field appearance="fill">
      <mat-label>{{field.placeholder}}</mat-label>
      <input matInput [name]="field.name" value="" 
  [required]="field.required">
    </mat-form-field>
  </div>

  <div class="note-container" *ngIf="showhidenote">
    <mat-card class="note-container-form">
      <div class="arrow-up"></div>
      <mat-form-field>
        <input matInput type="text" placeholder="Note:" [(ngModel)]="value">
        <button mat-button *ngIf="value" matSuffix mat-icon-button aria- 
  label="Clear" (click)="value=''">
          <mat-icon>close</mat-icon>
        </button>
      </mat-form-field>
    </mat-card>
  </div>

 </ng-container>


  <ng-container *ngIf="field.type === 'link'">
  <h5>{{field.label}}</h5>
  <div>
    <button mat-raised-button [name]="field.name" 
  [value]="field.value">Link</button>
  </div>
  </ng-container>

  <ng-container *ngIf="field.type === 'radio'">
  <h5>{{field.label}}</h5>
  <div>
   <mat-radio-group>
      <mat-radio-button *ngFor="let radioField of field.values" 
        [name]="field.name" [value]="radioField.value" 
       [required]="field.required">{{radioField.label}}</mat-radio-button>
    </mat-radio-group>
  </div>
  </ng-container>

  <ng-container *ngIf="field.type === 'file'">
   <h5>{{field.label}}</h5>
   <div>
    <input [name]="field.name" type="file" [required]="field.required">
   </div>
  </ng-container>

  <ng-container *ngIf="field.type === 'date'">
   <h5>{{field.label}}</h5>
   <div class="box-text-field">
    <mat-checkbox class="toolbar-checkbox" [(ngModel)]="field.checkedFlag" 
     id="checkBoxDate{{i}}{{currentIndex}}">
      MyCheckbox
    </mat-checkbox>

     <mat-form-field appearance="fill">
      <mat-label>{{field.placeholder}}</mat-label>
      <input matInput [matDatepicker]="picker" [name]="field.name" 
      [required]="field.required">
      <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker- 
       toggle>
       <mat-datepicker #picker></mat-datepicker>
       </mat-form-field>
       </div>
     </ng-container>

    <div class="section-content-full" style="width: 46vw; height: 100%;">
     <ng-container *ngIf="field.type === 'textarea'">
     <h5>{{field.label}}</h5>
     <div class="box-text-field box-textarea-field">
      <mat-checkbox class="toolbar-checkbox" [(ngModel)]="field.checkedFlag" 
       id="checkBoxText{{i}}{{currentIndex}}">
        checkBox1
      </mat-checkbox>
      <mat-form-field appearance="fill">
        <mat-label>{{field.placeholder}}</mat-label>
        <textarea matInput [name]="field.name" value="" 
        [required]="field.required"></textarea>
        </mat-form-field>
      </div>


    <div class="note-container" *ngIf="showhidenote">
      <mat-card class="note-container-form">
        <div class="arrow-up"></div>
        <mat-form-field>
          <input matInput type="text" placeholder="Note:" 
          [(ngModel)]="value">
          <button mat-button *ngIf="value" matSuffix mat-icon-button aria- 
          label="Clear" (click)="value=''">
            <mat-icon>close</mat-icon>
          </button>
        </mat-form-field>
      </mat-card>
    </div>
    </ng-container>
     </div>
   </div>
 </section>

 <div class="button-row">
 <button class="button-cancel" mat-raised-button>Cancel</button>
 <button class="button-reject" mat-raised-button>Reject</button>
 <button class="button-submit" mat-raised-button 
 (click)="onSubmit()">Submit</button>
  </div>

在你的控制器内部可以简单地看到新生成的对象

 onSubmit(){
   console.log(this.inputs);
 }

希望对你有帮助