Angular Forms: Как избежать нескольких NgIf div для сообщений об ошибках валидации?

Question

Я хотел бы упростить код ниже:

<div *ngIf="form1.errors?.checkDate && (form1.touched || form1.dirty)" class="cross-validation-error-message alert alert-danger">
    Date can't be in the future.
</div>
<div *ngIf="form1.errors?.notAfterDate && (form1.touched || form1.dirty)" class="cross-validation-error-message alert alert-danger">
    Birth Date must be after 1/1/1800.
</div>

Должно быть только 1 div *ngif и передать сообщение об ошибке в качестве значения вместо жесткого кодирования или использовать ngFor?

Любая помощь в этом очень ценится. Благодарю.

Answer 1

Обычный метод управления несколькими сообщениями проверки угловой формы заключается в хранении их на карте.

public validationMessages = {
  'firstName': [
    { type: 'required', message: 'First Name is required' },
    { type: 'maxlength', message: 'First Name may only contain 5 characters.' }
  ],
  'lastName': [
    { type: 'required', message: 'Last Name is required' },
    { type: 'pattern', message: 'Last Name may not be "Smith".' }
  ],
  'email': [
    { type: 'required', message: 'Email is required' },
    { type: 'email', message: 'Enter a valid email' }
  ]
}

HTML шаблон

В шаблоне используйте NgFor перебирать сообщения проверки для требуемого элемента управления формы.

<label>
  Email:
  <input type="email" autocomplete="email" formControlName="email" required>
</label>
<!-- Validation Errors -->
<div *ngFor="let validation of validationMessages.email">
  <div *ngIf="profileForm.get('email').hasError(validation.type) && (profileForm.get('email').dirty || profileForm.get('email').touched)">
    <small style="color:red;">{{validation.message}}</small>
  </div>
</div>

пример

Посмотреть демонстрацию Stackblitz

Answer 2

Мне нравится ошибка-компонента.

@Component({
  selector: 'app-error',
  template: `
  <small class="form-text text-danger" *ngIf="(control.touched || control.dirty)
         && control.invalid && (error?control.errors[error]:true)" >
       <ng-content></ng-content>
    </small>`
})
export class ErrorComponent {

  @Input('controlName') controlName: string;
  @Input('error') error: string

  @Input('control') control:any

  visible: boolean = false;

  constructor(@Optional() @Host() public form: FormGroupDirective) { }

  ngOnInit() {
    if (this.form) {
      this.control = this.form.form.get(this.controlName) as FormControl
    }
  }
}

Вы можете использовать в форме Group, используйте controlName ввод, чтобы указать элемент управления, и error введите, если у вас несколько валидаторов и вы хотите различать

<form [formGroup]="form">
  <input formControlName="email">
    <app-error controlName="email" error="required">Email required.</app-error>
    <app-error controlName="email" error="email">incorrect email </app-error>
</form>

form=new FormGroup({
    email:new FormControl('',[Validators.required,Validators.email])
  })

Или автономно, используйте [control] ввод для указания элемента управления

<input [formControl]="control">
<app-error [control]="control">control required</app-error>

control=new FormControl('',Validators.required)

Посмотреть демонстрацию stackblitz