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

Question

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

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

我传递一个布尔变量'submitted'来检查控件在提交时是否有效.有没有办法检查控件的状态而不手动传递变量？Angular2形式为我们提供了6类,如ng-touched,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按照此处所示进行检查。

Angular Form Control 的现状

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。我希望这一定会对您有所帮助。