I'm having this dynamic form with an option which allow the users to add a note to a certain question that is ask to them, if only they check the checkbox right before the question. I do have 10 questions so there are also 10 checkbox respectively. My problem now is when I check one checkbox, all of the other checkbox are automatically checked. How can I avoid this scenario where all of the checkbox are automatically checked even if the user only need to check one? I'm actually new to angular and this angular material. Please help me solving this matter. Any help will be much appreciated.
This is my 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></h5>
<div class="box-text-field">
<mat-checkbox [(ngModel)]="showhidenote" [checked]="field.id"></mat-checkbox>
<mat-form-field appearance="fill">
<mat-label></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></h5>
<div>
<button mat-raised-button [name]="field.name" [value]="field.value">Link</button>
</div>
</ng-container>
<ng-container *ngIf="field.type === 'radio'">
<h5></h5>
<div>
<mat-radio-group>
<mat-radio-button *ngFor="let radioField of field.values" [name]="field.name" [value]="radioField.value" [required]="field.required"></mat-radio-button>
</mat-radio-group>
</div>
</ng-container>
<ng-container *ngIf="field.type === 'file'">
<h5></h5>
<div>
<input [name]="field.name" type="file" [required]="field.required">
</div>
</ng-container>
<ng-container *ngIf="field.type === 'date'">
<h5></h5>
<div class="box-text-field">
<mat-checkbox></mat-checkbox>
<mat-form-field appearance="fill">
<mat-label></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></h5>
<div class="box-text-field box-textarea-field">
<mat-checkbox [(ngModel)]="showhidenote"></mat-checkbox>
<mat-form-field appearance="fill" >
<mat-label></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>
This is my 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);
}
};
This is the json file I imported in my app.conponent.ts (line 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
}
]
}
]
};
Below is the screenshot of the form I made
This is the screenshot of the problem in my form
Aucun commentaire:
Enregistrer un commentaire