angular - Reaktive skjemaer: merk alle kontroller i skjema gruppen som endret

Jeg har en Angular 6-app med skjema. Her er et eksempel

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();
    }
}

Jeg vil ikke få en enkelt kontroll og merke hvert felt. Kan jeg merke alle kontroller i skjemagruppen som skitne?

OPPDATERING Jeg har lagt til et Stackblitz-eksempel for å vise at de to forrige svarene var feil

Svar #1

Hvis du har en komplisert skjemaoppbygning, kan du skille koden for å markere FormGroup, FormArray eller FormControl som skitten. Se eksempelet her: Marker skjema som skitten

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();
}

Svar #2

Enten merk hele formGroup som skitten:

this.form.markAsDirty();

Eller merk hvert felt:

Object.keys(this.form.controls).forEach(key => {
  this.form.get(key).markAsDirty();
});

Relaterte artikler