Angular 2: Iterar sobre controles de forma reactiva


Me gustaría markAsDirty todos los controles dentro de un FormGroup.

 30
Author: Marcos J.C Kichel, 2017-02-14

5 answers

Descubrió que Object.keys puede manejar esto..

Object.keys(this.form.controls).forEach(key => {
  this.form.get(key).markAsDirty();
});
 76
Author: Marcos J.C Kichel,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-02-14 20:04:50

Por si sirve de algo, hay otra manera de hacer esto sin tener que usar el Objeto .claves(...) magia:

for (const field in this.form.controls) { // 'field' is a string

   const control = this.form.get(field); // 'control' is a FormControl

}
 18
Author: Liviu Ilea,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-09-25 21:18:27

La respuesta aceptada es correcta para una estructura de forma plana, pero no responde completamente a la pregunta original. Una página web puede requerir FormGroups anidados y FormArrays, y debemos tener esto en cuenta para crear una solución robusta.

public markControlsDirty(group: FormGroup | FormArray): void {
    Object.keys(group.controls).forEach((key: string) => {
        const abstractControl = group.controls[key];

        if (abstractControl instanceof FormGroup || abstractControl instanceof FormArray) {
            this.markControlsDirty(abstractControl);
        } else {
            abstractControl.markAsDirty();
        }
    });
}
 9
Author: Keenan Diggs,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2018-06-22 16:44:14

    Object.keys( this.registerForm.controls).forEach(key => {
       this.registerForm.controls[key].markAsDirty();
    });
 5
Author: Foad,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-08-23 15:25:53

Usando @Marcos answer he creado una función que se puede llamar pasándole un FormGroup como parámetro y que marca todos los controles secundarios de FormGroup a dirty, solo para hacerlo utilizable desde más lugares alrededor del código poniéndolo dentro de un servicio, por ejemplo.

public touchAllFormFields(formGroup: FormGroup): void {
    Object.keys(formGroup.controls).forEach((key) => {
        formGroup.get(key).markAsDirty();
    });
}

Espero que ayude;)

 2
Author: Hugo,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2018-03-19 10:53:30