在angular2中的表单提交上显示错误消息？

Question

我在这个演示中实现了模型驱动的表单。 如果用户没有输入任何内容并提交表单，我将使用此逻辑显示错误消息

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

我传递一个布尔变量'submitted'来检查控件在提交时是否有效。 有没有办法检查控件的状态而不手动传递变量？ Angular2形式为我们提供了6个类，如ng-touched touching， ng-untouched ， ng-valid ， ng-invalid ， ng-pristine和ng-dirty 。 我想仅使用这些类来显示错误消息。

Answer 1

我知道很久以前就发布了这个问题，但是我遇到了同样的问题，我想利用角度控制状态，所以发现这个工作正常：

首先，如果控件不是原始的，我会显示错误：

<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);
}

希望这可以帮助

Answer 2

是...

您可以在此处查看Angular form control's state 。

角形控制的当前状态

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实现的文本框中。 我希望这肯定会对你有所帮助。

Answer 3

我会利用pristine和/或touched属性：

• 如果要在用户填写字段中的内容后显示错误，请使用pristine属性
• 如果要在用户将焦点放在字段上后显示错误，请使用touched属性

这是一个示例：

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

希望它对你有帮助，蒂埃里

Answer 4

我需要在顶部显示一个验证横幅，显示提交时的所有表单验证错误，并且仅在提交时显示，这听起来像是您尝试做的事情。

目前运行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

Answer 5

我创建了ng-message的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