不要自动选中所有复选框-“角度材质”复选框
我有一个带有选项的动态表格，允许用户向问到他们的某个问题添加注释，前提是他们只选中问题前的复选框。我确实有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（第2行）中导入的json文件
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
}
]
}
]
};
下面是我制作的表单的屏幕截图
这是我表格中问题的屏幕截图
1 个答案:
答案 0 :(得分：1)
这不是bug，它是复选框的工作方式。只需要将每个复选框与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);
}
希望这可能对您有帮助
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？