Menu
A FormGroup aggregates the values of each child FormControl into one object, with each control name as the key. It calculates its status by reducing the status values of its children. For example, if one of the controls in a group is invalid, the entire group becomes invalid.
Using FormGroup Next, you need to create an instance of FormGroup with the instances of FormControl : productForm = new FormGroup({ reference: new FormControl(), quantity: new FormControl('11') }); You can provide a default value for the control, by passing it as an argument to the FormControl .
How do I reset the reactive form in angular 13? In a model-driven form to reset the form we just need to call the function reset() on our myform model. The form now resets, all the input fields go back to their initial state and any valid , touched or dirty properties are also reset to their starting values.
Sometimes, we don't need a FormGroup, as our form might only consist of a single form control. Think of a search field that let's you search for products in an e-commerce application. Technically, we don't even need a <form> element for that.
When using Reactive Forms, a formGroup containing FormControls which are invalid(invalid form) is shown as invalid which is normal, but it does not contain any errors.
I should be able to get all the errors from the form in the formGroup.errors but it is null
However, The form state is invalid and under every invalid formControl it gives me the validation error What am I missing ?
check for errors:
import { Component, OnInit } from '@angular/core';
import { FormGroup, FormControl, Validators } from "@angular/forms";
import { DB1 } from 'src/app/interfaces/IDB';
import { DBS } from 'src/app/consts';
@Component({
selector: 'app-new-dashboard',
templateUrl: './new-dashboard.component.html',
styleUrls: ['./new-dashboard.component.scss']
})
export class NewDashboardComponent implements OnInit {
dbs: string[] = ["DB1", "DB2"]
selectAxisOptions:string[] = []
newDashboardForm = new FormGroup({
name: new FormControl(null, [Validators.required]),
db: new FormControl(null, [Validators.required]),
axis: new FormControl({ value: null, disabled: true }, [Validators.required])
})
constructor() { }
ngOnInit() {
}
resetForm() {
this.newDashboardForm.reset()
}
onSelectionChanged(evt) {
let value = evt.target.value;
this.axis.enable();
switch (value) {
case 'DB1':
{
this.selectAxisOptions = [...DBS.get("DB1").values()]
break;
}
case 'DB2':
{
this.selectAxisOptions = [...DBS.get("DB2").values()]
break;
}
}
}
onSubmit() {
console.log(this.newDashboardForm);
}
get name() {
return this.newDashboardForm.get('name')
}
get db() {
return this.newDashboardForm.get('db')
}
get axis() {
return this.newDashboardForm.get('axis')
}
}
html:
<div class="modal-body">
<form [formGroup]="newDashboardForm" (ngSubmit)="onSubmit()">
<input formControlName="name" type="text" class="form-control" placeholder="Dashboard Name">
<select formControlName="db" (change)="onSelectionChanged($event)" class="custom-select">
<option disabled="true" [selected]="true">select DB</option>
<option *ngFor="let db of dbs">{{db}}</option>
</select>
<select formControlName="axis" class="custom-select">
<option disabled="true" [selected]="true">select column</option>
<option *ngFor="let column of selectAxisOptions">{{column}}</option>
</select>
<div class="modal-footer">
<button type="submit" class="btn btn-primary">Create Dashboard</button>
</div>
</form>
</div>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With