Ich habe Probleme herauszufinden, wie alle Felder des Formulars als berührt markiert werden können. Das Hauptproblem ist, dass, wenn ich keine Felder berühre und versuche, einen Formularüberprüfungsfehler einzureichen, dieser nicht angezeigt wird. Ich habe einen Platzhalter für diesen Code in meinem Controller.
Meine Idee ist einfach:

1. Benutzer klickt auf die Schaltfläche "Senden"
2. Alle Felder werden als berührt markiert
3. Fehlerformatierer führt erneut aus und zeigt Validierungsfehler an

Wenn jemand eine andere Idee hat, wie Fehler beim Senden angezeigt werden können, ohne eine neue Methode zu implementieren, teilen Sie diese bitte mit. Vielen Dank!

Meine vereinfachte Form:

<form class="form-horizontal" [formGroup]="form" (ngSubmit)="onSubmit(form.value)">
    <input type="text" id="title" class="form-control" formControlName="title">
    <span class="help-block" *ngIf="formErrors.title">{{ formErrors.title }}</span>
    <button>Submit</button>
</form>

Und mein Controller:

import {Component, OnInit} from '@angular/core';
import {FormGroup, FormBuilder, Validators} from '@angular/forms';

@Component({
  selector   : 'pastebin-root',
  templateUrl: './app.component.html',
  styleUrls  : ['./app.component.css']
})
export class AppComponent implements OnInit {
  form: FormGroup;
  formErrors = {
    'title': ''
  };
  validationMessages = {
    'title': {
      'required': 'Title is required.'
    }
  };

  constructor(private fb: FormBuilder) {
  }

  ngOnInit(): void {
    this.buildForm();
  }

  onSubmit(form: any): void {
    // somehow touch all elements so onValueChanged will generate correct error messages

    this.onValueChanged();
    if (this.form.valid) {
      console.log(form);
    }
  }

  buildForm(): void {
    this.form = this.fb.group({
      'title': ['', Validators.required]
    });
    this.form.valueChanges
      .subscribe(data => this.onValueChanged(data));
  }

  onValueChanged(data?: any) {
    if (!this.form) {
      return;
    }

    const form = this.form;

    for (const field in this.formErrors) {
      if (!this.formErrors.hasOwnProperty(field)) {
        continue;
      }

      // clear previous error message (if any)
      this.formErrors[field] = '';
      const control = form.get(field);
      if (control && control.touched && !control.valid) {
        const messages = this.validationMessages[field];
        for (const key in control.errors) {
          if (!control.errors.hasOwnProperty(key)) {
            continue;
          }
          this.formErrors[field] += messages[key] + ' ';
        }
      }
    }
  }
}

Die folgende Funktion wird durch Steuerelemente in einer Formulargruppe wiederholt und berührt sie sanft. Da das Steuerelementfeld ein Objekt ist, ruft der Code Object.values ​​() im Steuerfeld der Formulargruppe auf.

  /**
   * Marks all controls in a form group as touched
   * @param formGroup - The form group to touch
   */
  private markFormGroupTouched(formGroup: FormGroup) {
    (<any>Object).values(formGroup.controls).forEach(control => {
      control.markAsTouched();

      if (control.controls) {
        this.markFormGroupTouched(control);
      }
    });
  }

Ab Angular 8/9 können Sie einfach verwenden

this.form.markAllAsTouched();

Markieren eines Steuerelements und seiner untergeordneten Steuerelemente als berührt.

AbstractControl doc

In Bezug auf die Antwort von @ masterwork. Ich habe diese Lösung ausprobiert, aber es ist ein Fehler aufgetreten, als die Funktion versucht hat, rekursiv in einer FormGroup zu graben, da in dieser Zeile ein FormControl-Argument anstelle einer FormGroup übergeben wird:

control.controls.forEach(c => this.markFormGroupTouched(c));

Hier ist meine Lösung

markFormGroupTouched(formGroup: FormGroup) {
 (<any>Object).values(formGroup.controls).forEach(control => {
   if (control.controls) { // control is a FormGroup
     markFormGroupTouched(control);
   } else { // control is a FormControl
     control.markAsTouched();
   }
 });
}

In Angular v8 ist dies mithilfe der markAllAsTouchedMethode integriert.

Als Beispiel könnten Sie es wie verwenden

form.markAllAsTouched();

Siehe das offizielle Dokument: https://angular.io/api/forms/AbstractControl#markallastouched

Das Durchlaufen der Formularsteuerelemente und das Markieren als berührt würde ebenfalls funktionieren:

for(let i in this.form.controls)
    this.form.controls[i].markAsTouched();

Das ist meine Lösung

      static markFormGroupTouched (FormControls: { [key: string]: AbstractControl } | AbstractControl[]): void {
        const markFormGroupTouchedRecursive = (controls: { [key: string]: AbstractControl } | AbstractControl[]): void => {
          _.forOwn(controls, (c, controlKey) => {
            if (c instanceof FormGroup || c instanceof FormArray) {
              markFormGroupTouchedRecursive(c.controls);
            } else {
              c.markAsTouched();
            }
          });
        };
        markFormGroupTouchedRecursive(FormControls);
      }

Ich hatte dieses Problem, fand aber den "richtigen" Weg, obwohl es in keinem Angular-Tutorial enthalten war, das ich jemals gefunden habe.

Fügen Sie in Ihrem HTML-Code auf dem formTag dieselbe Vorlagenreferenzvariable #myVariable='ngForm'('Hashtag'-Variable) hinzu, die in den Beispielen für vorlagengesteuerte Formulare verwendet wird, zusätzlich zu den Beispielen für reaktive Formulare:

<form [formGroup]="myFormGroup" #myForm="ngForm" (ngSubmit)="submit()">

Jetzt haben Sie Zugriff auf myForm.submitteddie Vorlage, die Sie anstelle (oder zusätzlich zu) verwenden können myFormGroup.controls.X.touched:

<div *ngIf="myForm.submitted" class="text-error"> <span *ngIf="myFormGroup.controls.myFieldX.errors?.badDate">invalid date format</span> <span *ngIf="myFormGroup.controls.myFieldX.errors?.isPastDate">date cannot be in the past.</span> </div>

Wisse, dass myForm.form === myFormGroupdas wahr ist ... solange du den ="ngForm"Teil nicht vergisst . Wenn Sie es #myFormalleine verwenden, funktioniert es nicht, da die Variable auf das HTML-Element gesetzt wird, anstatt auf die Direktive, die dieses Element steuert.

Wissen Sie, dass myFormGroupin Ihrer Komponente Typoskript Code gemäß dem Reactive Forms Tutorials sichtbar ist, aber myFormnicht, wenn Sie es in durch einen Methodenaufruf übergeben, wie submit(myForm)zu submit(myForm: NgForm): void {...}. (Hinweis NgFormist im Typoskript in Titelkappen, in HTML jedoch in Kamelbuchstaben.)

onSubmit(form: any): void {
  if (!this.form) {
    this.form.markAsTouched();
    // this.form.markAsDirty(); <-- this can be useful 
  }
}

Ich bin auf dasselbe Problem gestoßen, möchte meine Komponenten jedoch nicht mit Code "verschmutzen", der dies behandelt. Zumal ich dies in vielen Formen brauche und den Code nicht bei verschiedenen Gelegenheiten wiederholen möchte.

Daher habe ich eine Richtlinie erstellt (unter Verwendung der bisher veröffentlichten Antworten). Die Direktive schmückt die Methode von onSubmitNgForm: Wenn das Formular ungültig ist, werden alle Felder als berührt markiert und die Übermittlung abgebrochen. Ansonsten wird die übliche onSubmit-Methode normal ausgeführt.

import {Directive, Host} from '@angular/core';
import {NgForm} from '@angular/forms';

@Directive({
    selector: '[appValidateOnSubmit]'
})
export class ValidateOnSubmitDirective {

    constructor(@Host() form: NgForm) {
        const oldSubmit = form.onSubmit;

        form.onSubmit = function (): boolean {
            if (form.invalid) {
                const controls = form.controls;
                Object.keys(controls).forEach(controlName => controls[controlName].markAsTouched());
                return false;
            }
            return oldSubmit.apply(form, arguments);
        };
    }
}

Verwendung:

<form (ngSubmit)="submit()" appValidateOnSubmit>
    <!-- ... form controls ... -->
</form>

Dies ist der Code, den ich tatsächlich verwende.

validateAllFormFields(formGroup: any) {
    // This code also works in IE 11
    Object.keys(formGroup.controls).forEach(field => {
        const control = formGroup.get(field);

        if (control instanceof FormControl) {
            control.markAsTouched({ onlySelf: true });
        } else if (control instanceof FormGroup) {               
            this.validateAllFormFields(control);
        } else if (control instanceof FormArray) {  
            this.validateAllFormFields(control);
        }
    });
}    

Dieser Code funktioniert für mich:

markAsRequired(formGroup: FormGroup) {
  if (Reflect.getOwnPropertyDescriptor(formGroup, 'controls')) {
    (<any>Object).values(formGroup.controls).forEach(control => {
      if (control instanceof FormGroup) {
        // FormGroup
        markAsRequired(control);
      }
      // FormControl
      control.markAsTouched();
    });
  }
}

Eine Lösung ohne Rekursion

Für diejenigen, die sich Sorgen um die Leistung machen, habe ich eine Lösung gefunden, die keine Rekursion verwendet, obwohl sie immer noch alle Steuerelemente in allen Ebenen durchläuft.

 /**
  * Iterates over a FormGroup or FormArray and mark all controls as
  * touched, including its children.
  *
  * @param {(FormGroup | FormArray)} rootControl - Root form
  * group or form array
  * @param {boolean} [visitChildren=true] - Specify whether it should
  * iterate over nested controls
  */
  public markControlsAsTouched(rootControl: FormGroup | FormArray,
    visitChildren: boolean = true) {

    let stack: (FormGroup | FormArray)[] = [];

    // Stack the root FormGroup or FormArray
    if (rootControl &&
      (rootControl instanceof FormGroup || rootControl instanceof FormArray)) {
      stack.push(rootControl);
    }

    while (stack.length > 0) {
      let currentControl = stack.pop();
      (<any>Object).values(currentControl.controls).forEach((control) => {
        // If there are nested forms or formArrays, stack them to visit later
        if (visitChildren &&
            (control instanceof FormGroup || control instanceof FormArray)
           ) {
           stack.push(control);
        } else {
           control.markAsTouched();
        }
      });
    }
  }

Diese Lösung funktioniert sowohl mit FormGroup als auch mit FormArray.

Hier können Sie damit herumspielen: Winkelmarkierung als berührt

gemäß @masterwork

Typoskript-Code für die Winkelversion 8

private markFormGroupTouched(formGroup: FormGroup) {
    (Object as any).values(formGroup.controls).forEach(control => {
      control.markAsTouched();
      if (control.controls) {
        this.markFormGroupTouched(control);
      }
    });   }

Hier ist, wie ich es mache. Ich möchte nicht, dass die Fehlerfelder angezeigt werden, bis die Senden-Schaltfläche gedrückt wird (oder das Formular berührt wird).

import {FormBuilder, FormGroup, Validators} from "@angular/forms";

import {OnInit} from "@angular/core";

export class MyFormComponent implements OnInit {
  doValidation = false;
  form: FormGroup;


  constructor(fb: FormBuilder) {
    this.form = fb.group({
      title: ["", Validators.required]
    });

  }

  ngOnInit() {

  }
  clickSubmitForm() {
    this.doValidation = true;
    if (this.form.valid) {
      console.log(this.form.value);
    };
  }
}

<form class="form-horizontal" [formGroup]="form" >
  <input type="text" class="form-control" formControlName="title">
  <div *ngIf="form.get('title').hasError('required') && doValidation" class="alert alert-danger">
            title is required
        </div>
  <button (click)="clickSubmitForm()">Submit</button>
</form>

Ich verstehe die Frustration des OP vollkommen. Ich benutze folgendes:

Dienstprogrammfunktion :

/**
 * Determines if the given form is valid by touching its controls 
 * and updating their validity.
 * @param formGroup the container of the controls to be checked
 * @returns {boolean} whether or not the form was invalid.
 */
export function formValid(formGroup: FormGroup): boolean {
  return !Object.keys(formGroup.controls)
    .map(controlName => formGroup.controls[controlName])
    .filter(control => {
      control.markAsTouched();
      control.updateValueAndValidity();
      return !control.valid;
    }).length;
}

Verwendung :

onSubmit() {
  if (!formValid(this.formGroup)) {
    return;
  }
  // ... TODO: logic if form is valid.
}

Beachten Sie, dass diese Funktion noch nicht für verschachtelte Steuerelemente geeignet ist.

Sehen Sie dieses Juwel . Bisher die eleganteste Lösung, die ich je gesehen habe.

Vollständiger Code

import { Injectable } from '@angular/core';
import { FormGroup } from '@angular/forms';

const TOUCHED = 'markAsTouched';
const UNTOUCHED = 'markAsUntouched';
const DIRTY = 'markAsDirty';
const PENDING = 'markAsPending';
const PRISTINE = 'markAsPristine';

const FORM_CONTROL_STATES: Array<string> = [TOUCHED, UNTOUCHED, DIRTY, PENDING, PRISTINE];

@Injectable({
  providedIn: 'root'
})
export class FormStateService {

  markAs (form: FormGroup, state: string): FormGroup {
    if (FORM_CONTROL_STATES.indexOf(state) === -1) {
      return form;
    }

    const controls: Array<string> = Object.keys(form.controls);

    for (const control of controls) {
      form.controls[control][state]();
    }

    return form;
  }

  markAsTouched (form: FormGroup): FormGroup {
    return this.markAs(form, TOUCHED);
  }

  markAsUntouched (form: FormGroup): FormGroup {
    return this.markAs(form, UNTOUCHED);
  }

  markAsDirty (form: FormGroup): FormGroup {
    return this.markAs(form, DIRTY);
  }

  markAsPending (form: FormGroup): FormGroup {
    return this.markAs(form, PENDING);
  }

  markAsPristine (form: FormGroup): FormGroup {
    return this.markAs(form, PRISTINE);
  }
}

    /**
    * Marks as a touched
    * @param { FormGroup } formGroup
    *
    * @return {void}
    */
    markFormGroupTouched(formGroup: FormGroup) {
        Object.values(formGroup.controls).forEach((control: any) => {

            if (control instanceof FormControl) {
                control.markAsTouched();
                control.updateValueAndValidity();

            } else if (control instanceof FormGroup) {
                this.markFormGroupTouched(control);
            }
        });
    }

Aussicht:

<button (click)="Submit(yourFormGroup)">Submit</button>   

API

Submit(form: any) {
  if (form.status === 'INVALID') {
      for (let inner in details.controls) {
           details.get(inner).markAsTouched();
       }
       return false; 
     } 
     // as it return false it breaks js execution and return 

Ich habe eine Version mit einigen Änderungen in den vorgestellten Antworten erstellt. Für diejenigen, die Versionen verwenden, die älter als Version 8 des Winkels sind, möchte ich sie mit denen teilen, die nützlich sind.

Dienstprogrammfunktion:

import {FormControl, FormGroup} from "@angular/forms";

function getAllControls(formGroup: FormGroup): FormControl[] {
  const controls: FormControl[] = [];
  (<any>Object).values(formGroup.controls).forEach(control => {
    if (control.controls) { // control is a FormGroup
      const allControls = getAllControls(control);
      controls.push(...allControls);
    } else { // control is a FormControl
      controls.push(control);
    }
  });
  return controls;
}

export function isValidForm(formGroup: FormGroup): boolean {
  return getAllControls(formGroup)
    .filter(control => {
      control.markAsTouched();
      return !control.valid;
    }).length === 0;
}

Verwendung:

onSubmit() {
 if (this.isValidForm()) {
   // ... TODO: logic if form is valid
 }
}