Angular 9/8 FormArray Example | FormArray in Angular
In this post we will give you information about Angular 9/8 FormArray Example | FormArray in Angular. Hear we will give you detail about Angular 9/8 FormArray Example | FormArray in AngularAnd how to use it also give you demo for it if it is necessary.
Hello Dev,
Are you looking for example of angular formarray example. let’s discuss about angular 9 formarray example. we will help you to give example of formarray in angular example. you can understand a concept of form array in angular example.
I will show you very simple and step by step example of how to use formarray in angular 6, anuglar 7, angular 8 and angular 9 application.
Using FormArray you can create building blocks of forms with FormControl in Angular. FormArray will key values of each child FormControl into an array. You can easily create dynamic add more input fields example using FormArray in Angular.
PHP - I Can't get the $_POST Values on Ajax Request
In this post we will give you information about PHP - I Can't get the $_POST Values on Ajax Request. Hear we will give you detail about PHP - I Can't get the $_POST Values on Ajax RequestAnd how to use it also give you demo for it if it is necessary.
I want to share this posts with you because when i was working on native PHP and Ajax Post request(Specially AngularJS Post request) at that time i can't get Post value on form submit. That's why i would like to share you this post. I also want to tell you i was working on my Ubuntu 14.04. I did try lot but i can't get value.
At last find stuff to how to solve this issue, i did use "file_get_contents('php://input')" that way i could get POST value in json object and i also decode json value using "json_decode()". So let's try this way :
Example:
$post = file_get_contents('php://input');
$post = json_decode($post);
$sql = "INSERT INTO items (title) VALUES ('".$post->title."')";
$result = $mysqli->query($sql);
Hope this code and post will helped you for implement PHP - I Can't get the $_POST Values on Ajax Request. if you need any help or any feedback give it in comment section or you have good idea about this post you can give it comment section. Your comment will help us for help you more and improve us. we will give you this type of more interesting post in featured also so, For more interesting post and code Keep reading our blogs
FormArray Constructor:
constructor(controls: AbstractControl[], validatorOrOpts?: ValidatorFn |
AbstractControlOptions | ValidatorFn[], asyncValidator?: AsyncValidatorFn |
AsyncValidatorFn[])
In this example we will create form with product name and user can add multiple quantity with price. we will use formgroup and formarray to create dynamic form in angular application.
You can see bellow layout for demo. let’s follow bellow step.
Import FormsModule:
src/app/app.module.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { AppComponent } from './app.component';
@NgModule({
imports: [ BrowserModule, FormsModule, ReactiveFormsModule ],
declarations: [ AppComponent ],
bootstrap: [ AppComponent ]
})
export class AppModule { }
updated Ts File
In this file we will first import FormGroup, FormControl,FormArray and FormBuilder from angular forms library.
src/app/app.component.ts
import { Component } from '@angular/core';
import { FormGroup, FormControl, FormArray, FormBuilder } from '@angular/forms'
@Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: [ './app.component.css' ]
})
export class AppComponent {
name = 'Angular';
productForm: FormGroup;
constructor(private fb:FormBuilder) {
this.productForm = this.fb.group({
name: '',
quantities: this.fb.array([]) ,
});
}
quantities() : FormArray {
return this.productForm.get("quantities") as FormArray
}
newQuantity(): FormGroup {
return this.fb.group({
qty: '',
price: '',
})
}
addQuantity() {
this.quantities().push(this.newQuantity());
}
removeQuantity(i:number) {
this.quantities().removeAt(i);
}
onSubmit() {
console.log(this.productForm.value);
}
}
Template Code:
In this step, we will write code of html form with ngModel. so add following code to app.component.html file.
I used bootstrap class on this form. if you want to add than then follow this link too: Install Boorstrap 4 to Angular 9.
src/app/app.component.html
<div >
<h1>Angular FormArray Example - ItSolutionStuff.com</h1>
<form [formGroup]="productForm" (ngSubmit)="onSubmit()">
<p>
<label for="name">Product Name:</label>
<input type="text" id="name" name="name" formControlName="name" >
</p>
<table formArrayName="quantities">
<tr>
<th colspan="2">Add Multiple Quantity:</th>
<th width="150px"><button type="button" (click)="addQuantity()" >Add More</button></th>
</tr>
<tr *ngFor="let quantity of quantities().controls; let i=index" [formGroupName]="i">
<td>
Quantity :
<input type="text" formControlName="qty" >
</td>
<td>
Price:
<input type="text" formControlName="price" >
</td>
<td>
<button (click)="removeQuantity(i)" >Remove</button>
</td>
</tr>
</table>
<button type="submit" >Submit</button>
</form>
<br/>
{{this.productForm.value | json}}
</div>
Now you can run your application using following command:
ng serve
I hope it can help you…
Hope this code and post will helped you for implement Angular 9/8 FormArray Example | FormArray in Angular. if you need any help or any feedback give it in comment section or you have good idea about this post you can give it comment section. Your comment will help us for help you more and improve us. we will give you this type of more interesting post in featured also so, For more interesting post and code Keep reading our blogs