Angular 来自 Laravel 后端的 Formbuilder 验证

Question

I'm fairly new to Angular and I'm currently struggeling to display errors on my form fields that originate from my API backend. My frontend validation works without any problem.

I've setup my frontend validation according to this link.

This is my form HTML:

<form [formGroup]="createDetailsForm" (ngSubmit)="onCreate()" autocomplete="off" *ngIf="!created_customer">
    <div class="modal-header">
        <h5 class="modal-title">
            {{'create_customer' | transloco | ucfirst}}
        </h5>
        <button type="button" class="close" (click)="d('Cross click')">&times;</button>
    </div>
    <div class="modal-body">
        <div class="form-row">
            <div class="form-group col">
                <label class="form-label">{{'name' | transloco | ucfirst}}</label>
                <input type="text" class="form-control" formControlName="name">
                <app-control-messages [control]="createDetailsForm.get('name')"></app-control-messages>
            </div>
        </div>
        <div class="form-row">
            <div class="form-group col mb-0">
                <label class="form-label">{{'vatnumber_prefix' | transloco | ucfirst}}</label>
                <app-countries controlName="vatnumber_prefix"></app-countries>
                <app-control-messages [control]="createDetailsForm.get('vatnumber_prefix')"></app-control-messages>
            </div>
            <div class="form-group col mb-0">
                <label class="form-label">{{'vatnumber' | transloco | ucfirst}}</label>
                <input type="text" class="form-control" placeholder="xxxxxxxxxx" formControlName="vatnumber"
                    pattern="[0-9]*">
                <app-control-messages [control]="createDetailsForm.get('vatnumber')"></app-control-messages>
            </div>
        </div>
        <div class="form-row">
            <div class="form-group col mb-0">
                <label class="form-label">{{'street' | transloco | ucfirst}}</label>
                <input type="text" class="form-control" placeholder="" formControlName="street">
                <app-control-messages [control]="createDetailsForm.get('street')"></app-control-messages>
            </div>
            <div class="form-group col mb-0">
                <label class="form-label">{{'number' | transloco | ucfirst}}</label>
                <input type="text" class="form-control" placeholder="" formControlName="number">
                <app-control-messages [control]="createDetailsForm.get('number')"></app-control-messages>
            </div>
            <div class="form-group col mb-0">
                <label class="form-label">{{'suffix' | transloco | ucfirst}}</label>
                <input type="text" class="form-control" placeholder="" formControlName="suffix">
                <app-control-messages [control]="createDetailsForm.get('suffix')"></app-control-messages>
            </div>
        </div>
        <div class="form-row">
            <div class="form-group col mb-0">
                <label class="form-label">{{'zipcode' | transloco | ucfirst}}</label>
                <input type="text" class="form-control" placeholder="" formControlName="zipcode">
                <app-control-messages [control]="createDetailsForm.get('zipcode')"></app-control-messages>
            </div>
            <div class="form-group col mb-0">
                <label class="form-label">{{'city' | transloco | ucfirst}}</label>
                <input type="text" class="form-control" placeholder="" formControlName="city">
                <app-control-messages [control]="createDetailsForm.get('city')"></app-control-messages>
            </div>
        </div>
        <div class="form-row">
            <div class="form-group col">
                <label class="form-label">{{'country' | transloco | ucfirst}}</label>
                <app-countries controlName="country"></app-countries>
                <app-control-messages [control]="createDetailsForm.get('country')"></app-control-messages>
            </div>
        </div>
        <div class="form-row">
            <div class="form-group col">
                <label class="form-label">{{'email' | transloco | ucfirst}}</label>
                <input type="email" class="form-control" formControlName="email">
                <app-control-messages [control]="createDetailsForm.get('email')"></app-control-messages>
            </div>
        </div>
        <div class="form-row">
            <div class="form-group col">
                <label class="form-label">{{'phone' | transloco | ucfirst}}</label>
                <input type="text" class="form-control" formControlName="phone">
                <app-control-messages [control]="createDetailsForm.get('phone')"></app-control-messages>
            </div>
        </div>

    </div>
    <div class="modal-footer">
        <button type="button" class="btn btn-default"
            (click)="c('Close click')">{{'close' | transloco | ucfirst}}</button>
        <button type="submit" class="btn btn-primary">{{'save' | transloco | ucfirst}}</button>

    </div>
</form>

So the messages are displayed with the app-control-messages component. This is setup exactly like in the previous link. his works with the default validators and a custom validation service. The formgroup is setup like this:

this.createDetailsForm = this.fb.group({
  name: ['', Validators.required],
  vatnumber_prefix: ['BE', Validators.required],
  vatnumber: ['', Validators.compose([Validators.required, ValidationService.numeric])],
  street: ['', Validators.required],
  number: ['', Validators.required],
  suffix: [''],
  zipcode: ['', Validators.required],
  city: ['', Validators.required],
  country: ['BE', Validators.required],
  email: ['', Validators.compose([Validators.required, ValidationService.emailValidator])],
  phone: ['', Validators.required],
  full_vatnumber: [],
});

Now the problem lies in the following. I've created a service which I can call from every error that comes from a http post to the backend. Here's an example of a httpclient error response:

    this.subs.sink = this.custService.createCustomer(value).subscribe((res) => {
  this.custService.add(res);
},
  (error) => {
    this.serverValidation.validate(error, this.createDetailsForm);
  })

Here is the errorbag I'm receiving and sending to the validate function.

The validate function:

@Input() form: FormGroup;
@Input() error: HttpErrorResponse;
constructor(private notificationService: NotificationsService) {
}

validate(error, form) {
 if (error.status === 422) {
   form.markAsUntouched();
   form.markAsPristine();
   for (var e in error.error.errors) {
     let control = form.get(e);
     if (control) {
       control.markAsTouched();
       control.markAsDirty();
       control.setErrors({ 'test': true });
       control.updateValueAndValidity();
     } else {
       return undefined;
     }
   }

   form.updateValueAndValidity();
 }

 this.notificationService.error(error.statusText, error.error.message);
}

So I'm trying to set the content of the errorbag to the specific formcontrol but it isn't displaying the message. Does someone know what I'm doing wrong?

EDIT:

As suggested by Ausiàs Armesto I've put the code in the error function in the frontend component:

(error) => {
    console.log(error);
    /* TODO Translate Backend validation errors  to form fields */
    this.createDetailsForm.markAsUntouched();
    this.createDetailsForm.markAsPristine();
    for (var e in error.error.errors) {
      let control = this.createDetailsForm.get(e);
      if (control) {
        control.markAsTouched();
        control.markAsDirty();
        for (var message in error.error.errors[e]) {
          control.setErrors({ 'error': { message: message } })
        }
      } else {
        return undefined;
      }
    }

and altered my validation service to show the message of the 'error' key. Now the messages show. So my next question would be: How can i refactor this to a external service?

SOLUTION

In the error callback I call my service:

      (error) => {
    this.serverValidation.validate(error, this.createDetailsForm);
  })

Validation Service:

export class ServersideFormValidationService {
@Input() form: FormGroup;
@Input() error: HttpErrorResponse;
constructor(private notificationService: NotificationsService) {

}

  validate(error, form) {

    if (error.status === 422) {
      form.markAsUntouched();
      form.markAsPristine();
      for (var e in error.error.errors) {
        let control = form.get(e);
        if (control) {
          control.markAsTouched();
          control.markAsDirty();
          control.setErrors({ 'error': { message: error.error.errors[e][0] } })
        } else {
          return undefined;
        }
      }
    }

    this.notificationService.error(error.statusText, error.error.message);
    }
  }

Answer 1

I would try to debug the Form controls properties when they are in the frontend Component (when it is named ' createDetailsForm ') and when they are in the validate function (when it is named ' form '). Without testing throughtly it seems that the form object is duplicated and then the changes made in the validate function are not propagated to the form defined in the visual component. I would also try to change the signature of the validate function so it returns the incorrect fields, something like that:

return ['field1', 'field2']

And in the error handler try to update the original form control:

(error) => {
    this.serverValidation.validate(error, this.createDetailsForm).forEach(errorControl => {
    this.createDetailsForm.get(errorControl).setErrors = ({ 'test': true })
    })
  }