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

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

<div *ngIf="(!myForm.find('sku').valid && submitted)">**sku is required</div>

Я передаю логическую переменную 'submit', чтобы проверить, является ли элемент управления действительным или нет, когда он отправлен. Есть ли способ проверить состояние элемента управления без передачи переменной вручную? Angular2 формы дают нам 6 классов, таких как ng-touched, ng-untouched, ng-valid, ng-invalid, ng-pristine и ng-dirty. Я хочу показать сообщение об ошибке, используя только эти классы.

Ответ 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