52960

Add checkbox dynamically using angular 2

Question:

I am new to angular and currently using angular 5 i want to add check box and drop down list on click event() using Reactive form control. Please suggest a solution.

Answer1:

Your html template should look something like below:

<div formArrayName="items" *ngFor="let item of items.controls; let i=index"> <div [formGroupName]="i" class="well"> <input type="checkbox" formControlName="isChecked" /> </div> <div *ngIf="isChecked.invalid && (isChecked.dirty || isChecked.touched)" class="alert alert-danger"> <div *ngIf="isChecked.errors.required"> Checkbox is required. </div> </div> </div> <button type="button" (click)="addItem()">Add Item</button>

Component file should contain a FormGroup with a FormArray called items defined in it.

this.formGroup = this.formBuilder.group({ items: this.formBuilder.array([]) })

The below code is a getter property for easy access.

get items(): FormArray { return this.formGroup.get('items') as FormArray; }

To add a checkbox on click.

private addItem(): void { this.items.push(this.buildItem()); } private buildItem(): FormGroup { return this.formBuilder.group({ id: [''], isChecked: [false, Validators.required], }); }

<strong>Note: I haven't tried it so correct the syntax as necessary.</strong>

Recommend

  • ImportError for Gnuplot in python terminal
  • Access to a single pixel in C#
  • how do i post textbox value which is dynamically created by jquery
  • RSRuntimeException: Loading of ScriptC script failed (build tools 19.0.2)
  • Is it possible to use LinkShare signatures in an iOS Smart Banner?
  • Tomcat Replacing VM arguments
  • Radio button in xamarin.ios
  • Angular Library Modules export components, services and others from module
  • hadoop jar command points to local filesystem
  • React Warning: Can't call setState (or forceUpdate) on an unmounted component
  • Split column values into multiple columns with CREATE VIEW
  • Accessing parent namespace inside a Shiny Module
  • Core Data and Reflexive Entity relationships (to-one or to-many)
  • Pyinstaller GLIBC_2.15 not found
  • How to create mirrored image effect with CSS single element
  • Use awk to convert GPS Position to Latitude & Longitude
  • How to fetch asset modification history in hyperledger fabric
  • How to convert days into months using datetime in Python3?
  • How to use Flask's render_template from an ajax POST form submit
  • Year over Year Stats from a Crossfilter Dataset
  • How to use Kaminari pagination gem with Sinatra and Mongoid?
  • Runtime complexity of getting the length of a string in different representations
  • Floating parent div grows to hypothetical width of floating child div
  • Google Spreadsheet Script to Blink a range of Cells
  • Amazon Elastick BeanStalk error: Failed to create the AWS Elastic Beanstalk application version
  • How to turn off notice reporting in xampp?
  • Can a PHP script be scheduled to run at a specific time or after a specific amount of time has expir
  • Send array to next viewcontroller iOs xcode [duplicate]
  • Codeigniniter insert data through models and controller
  • WPF custom control and direct content support
  • PHP Permalinks.. how to change?
  • media foundation H264 decoder not working properly
  • Running R's aov() mixed effects model from Python using rpy2
  • What does the “id” field in an Android “Google Play Music” broadcast intent correspond to?
  • Access to a Matlab gui from the web
  • JavaScript RegExp Replace
  • Time Complexity of Fibonacci Algorithm [duplicate]
  • XSLT Transformation to validate rules in XML document