I have Angular 6 app with form. Here is an examle
export class ExampleComponent implements OnInit {
form: FormGroup;
constructor(private fb: FormBuilder) { }
ngOnInit() {
this.form = new FormGroup({
first: new FormControl(),
last: new FormControl()
});
this.markControlsAsDirty(this.form);
}
markControlsAsDirty(form: FormGroup) {
this.form.get('first').markAsDirty();
this.form.get('last').markAsDirty();
}
}
I don't want to get a single control and mark every field. Can I mark all controls in form group as dirty?
UPDATE I've been added stackblitz example to show that two previous answers were wrong
Bookmark this question.
When the user changes the value in the watched field, the control is marked as "dirty" When the user blurs the form control element, the control is marked as "touched"
You should use the markAsDirty method, like this: control. markAsDirty(); This will also mark all direct ancestors as dirty to maintain the model.
If you have a complicated form structure, you can segregate the code to mark FormGroup
, FormArray
or FormControl
as dirty. See the example here : Mark Form as dirty
markDirty() {
this.markGroupDirty(this.form);
console.log('FORM:', this.form);}
markGroupDirty(formGroup: FormGroup) {
Object.keys(formGroup.controls).forEach(key => {
switch (formGroup.get(key).constructor.name) {
case "FormGroup":
this.markGroupDirty(formGroup.get(key) as FormGroup);
break;
case "FormArray":
this.markArrayDirty(formGroup.get(key) as FormArray);
break;
case "FormControl":
this.markControlDirty(formGroup.get(key) as FormControl);
break;
}
});
}
markArrayDirty(formArray: FormArray) {
formArray.controls.forEach(control => {
switch (control.constructor.name) {
case "FormGroup":
this.markGroupDirty(control as FormGroup);
break;
case "FormArray":
this.markArrayDirty(control as FormArray);
break;
case "FormControl":
this.markControlDirty(control as FormControl);
break;
}
});
}
markControlDirty(formControl: FormControl) {
formControl.markAsDirty();
}
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