In Angular FormGroup you can get value of all controls using value or getRawValue()
value is a property. getRawValue() is a FormGroup method.
Both FormGroup and FormArray extends AbstractControl. So both FormArray and FormGroup can inherit the methods and properties of AbstractControl class.
value Property in Angular
value is a property of AbstractControl.
If this property is used in FormGroup, it will display the values of enabled controls as object in key value pair format. When value property is used in FormArray it will display the values of enabled controls as an array.
Component Class
import { Component } from '@angular/core';
import { FormGroup, FormControl } from '@angular/forms';
@Component({
selector: 'app-reactiveform',
templateUrl: './reactiveform.component.html',
styleUrls: ['./reactiveform.component.scss']
})
export class ReactiveformComponent {
submitted: boolean;
reactiveForm = new FormGroup({
name: new FormControl(''),
id: new FormControl(''),
company: new FormControl({ value: 'ABC', disabled: true }),
email: new FormControl({ value: '', disabled: true })
});
submit() {
console.log(this.reactiveForm.value)
console.log(this.reactiveForm.getRawValue())
}
}
HTML File
<div class="container">
<div class="row">
<form [formGroup]="reactiveForm" (ngSubmit)="submit()"
class="col-xs-3">
<div class="form-group">
<label for="name">Name</label>
<input
type="text"
formControlName="name"
id="name"
class="form-control">
</div>
<div class="form-group">
<label for="id">Id</label>
<input
type="text"
formControlName="id"
id="id"
class="form-control">
</div>
<div class="form-group">
<label for="company">Company</label>
<input
type="text"
formControlName="company"
id="company"
class="form-control">
</div>
<div class="form-group">
<label for="name">Email</label>
<input
type="text"
formControlName="email"
id="email"
class="form-control">
</div>
<button class="btn btn-primary mr-1" type="submit">
Submit
</button>
</form>
</div>
</div>
Screenshot of the output