Отображение сообщения об ошибке в форме submit в angular2?

Ответ 1

Я знаю, что этот вопрос опубликован давным-давно, но у меня такая же проблема, и я хотел использовать состояния управления angular, поэтому нашел, что это работает правильно:

Сначала я бы показал ошибку, только если элемент управления не является первозданным:

<span class="help-block" 
      *ngIf="request.get('control').hasError('required') && 
            !request.get('control').pristine">
      This field is required!
</span>

Затем вы можете пройти через все элементы управления и пометить их как загрязненные в функции onSubmit:

onSubmit() {
//validations
this.form.updateValueAndValidity();
if (this.form.invalid) {
  Object.keys(this.form.controls).forEach(key => {
    this.form.get(key).markAsDirty();
  });
  return;
}

//call function for saving data
this.save(this.form.value);
}

Надеюсь, что это поможет

Ответ 2

Да...

вы можете проверить Angular form control state как показано здесь.

Angular Текущее состояние контроля формы

import {Component,View,bind} from 'angular2/core';
import {FORM_DIRECTIVES,CORE_DIRECTIVES,FormBuilder, Validators } from 'angular2/common';
import {bootstrap}        from 'angular2/platform/browser';


@Component({
  selector: 'my-app', 
  template: `
    <h1>LOGIN</h1>


        <form [ngFormModel]="loginForm"  #fm="ngForm"  (submit)="doLogin($event)">

        <input ngControl="name" type="text"  placeholder="Your name" #name="ngForm" required>

        <div [hidden]="name.valid || name.pristine" class="alert alert-danger">Name is required</div>

        <br/>

        <div>Valid ={{name.valid}}</div>
        <div>Pristine ={{name.pristine}}</div>
        <div>Touch ={{name.touched}}</div>

        <BR/><BR/>

        <input ngControl="password" type="password"  placeholder="Your password" #password="ngForm" required>

        <div [hidden]="password.valid || password.pristine" class="alert alert-danger">password is required</div>

        <br/>

        <div>Valid ={{password.valid}}</div>
        <div>Pristine ={{password.pristine}}</div>
        <div>Touch ={{password.touched}}</div>

        <BR/><BR/>

  <button type="submit" [disabled]="!loginForm.valid">Log in</button>

</form>
    `,
  directives: [ROUTER_DIRECTIVES,FORM_DIRECTIVES,CORE_DIRECTIVES]
})

export class Login { 
  constructor(fb: FormBuilder) {
    this.loginForm = fb.group({
      name: ["", Validators.required],
      password: ["", Validators.required]
    });
  }
  doLogin(event) {
    console.log(this.loginForm);
    event.preventDefault();
  }
 }

Не забудьте нажать кнопку входа, чтобы проверить разные объекты, связанные с формой, в консоли браузера. Более того, я попытался связать valid-invalid strip с текстовым полем, который я использовал для реализации в Angular1. Надеюсь, это поможет вам.

Ответ 3

Я бы использовал свойства pristine и/или touched:

• Если вы хотите отображать ошибки после того, как пользователь заполнил что-то в поле, используйте свойство pristine
• Если вы хотите отображать ошибки после того, как пользователь поставил фокус на поле, используйте свойство touched

Вот пример:

<div *ngIf="(!myForm.controls.sku.valid && !myForm.controls.sku.pristine)">
  **sku is required
</div>

Надеюсь, это поможет вам, Thierry

Ответ 4

Мне нужно было показать баннер проверки правильности вверху, показывая все ошибки проверки формы на submit и только на submit, что похоже на то, что вы пытались сделать.

В настоящее время выполняется ng2 beta 17, а структура не препятствует отправке недопустимой формы. Браузер предотвратит проверку html, например, требуемую от отправки, но любые другие настраиваемые валидаторы не препятствуют отправке формы.

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

Настройка формы

<form (ngSubmit)="validationSummary.submit()" [ngFormModel]="myForm">
<div #validationSummary form-validation-summary [form]="myForm" [validSubmitCallback]="validSubmitCallback"></div>
...
<button type="submit" value="SaveButton" class="Button">Save</button>
</form>

Страница с формой

export class SomeComponent implements OnInit {
    ...
    public validSubmitCallback: Function;
    ngOnInit() {
        this.validSubmitCallback = this.myFormSubmit.bind(this);
    }
    myFormSubmit() {
        alert("a valid form was submitted");
    }
}

Резюме проверки

@Component({
    selector: '[form-validation-summary]'
    ...

export class FormValidationSummary {
    @Input() public form: ControlGroup;
    @Input() public validSubmitCallback: Function; 
    ...
    submit() {
        if (this.form.valid) {
            this.validSubmitCallback();
        } else {
            this.formSubmitted = true;
       }
    }
}

Связано с добавлением отправки в форму: https://github.com/angular/angular/issues/2960

Ответ 5

Я создал версию ng-сообщения angular 2.

Синтаксис очень похож на ng-message:

<form [formGroup]="formGroup">
    <label for="phoneNumber">Phone Number</label>
    <input type="text" id="phoneNumber" name="phoneNumber" formControlName="phoneNumber" required>
    <cl-ng-messages [control]="formGroup.get('phoneNumber')">
      <template clNgMessage="required">
         This is required
      </template>
      <template clNgMessage="pattern">
        the format of phone number is not correct
      </template>
    </cl-ng-messages>
</form>

https://github.com/changLiuUNSW/ng-messages2