Как отобразить пользовательское сообщение об ошибке проверки - PullRequest
Новая
       50

Как отобразить пользовательское сообщение об ошибке проверки

1 голос
/ 08 апреля 2020

Для моей формы она имеет только один ввод, и это текстовая область, в которую пользователь вводит код JSON, а если текст не действителен JSON, он должен отображать сообщение об ошибке, но по какой-то причине он не будет работать.

Вот мой пользовательский валидатор: 

import { AbstractControl, ValidationErrors, ValidatorFn } from '@angular/forms';

export function jsonValidator(control: AbstractControl): ValidationErrors | null {
  try {
    JSON.parse(control.value);
  } catch (e) {
    console.log("Not Valid JSON");
    return { jsonInvalid: true };
  }

  return null;
};

Вот файл .ts 

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

@Component({
  selector: 'app-email-body-editor',
  templateUrl: './email-body-editor.component.html',
  styleUrls: ['./email-body-editor.component.scss']
})
export class EmailBodyEditorComponent implements OnInit {

  errorMsg : string = "Not VALID JSON";

  form = this.fb.group({
    jsonField: [null, [Validators.required , jsonValidator]]

  });

  constructor(private fb: FormBuilder) {
  }

  submit(): void {
    console.log(this.form);
  }

  ngOnInit(): void {

  }   
}

И, наконец, HTML Файл 

<form [formGroup]="form" (submit)="submit()">

    <mat-form-field appearance="fill">

        <mat-label>Textarea</mat-label>
        <textarea matInput
            formControlName="jsonField" 
            cols="1000" 
            placeholder="my custom json here" 
            cdkTextareaAutosize 
            cdkAutosizeMinRows="10"
            cdkAutosizeMaxRows="50">
        </textarea>
    </mat-form-field>
    <br>

    <div *ngIf="form.controls.jsonField.hasError('jsonValidator')">
        {{errorMsg}} 
    </div>

</form>

1 Ответ

2 голосов
/ 08 апреля 2020

Ваше имя ошибки проверки: jsonInvalid, а не jsonValidator.

Имя определяется оператором return в вашей функции валидатора. 

return { jsonInvalid: true };

Вы должны использовать это в ваш HTML: 

<div *ngIf="form.controls.jsonField.hasError('jsonInvalid')">
  {{errorMsg}} 
</div>

DEMO: https://stackblitz.com/edit/angular-h89jju

...