Question

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

<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

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

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

         Class.forName("net.ucanaccess.jdbc.UcanaccessDriver");
         System.setProperty("DUCANACCESS_HOME","C:/Users/mindurka/Downloads/Selenium3.4/UCanAccess-4.0.2-bin/UCanAccess-4.0.2-bin");

         String connURL = "jdbc:ucanaccess:"+TestCaseSheetPath+";";
         Connection objAccessCon = DriverManager.getConnection(connURL);

然后你可以通过所有控件并在onSubmit函数中将它们标记为脏：

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

希望这有帮助

Answer 2

...是

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

Angular Form Control's Current 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

我会利用var polarChart = new Chart(ctx).PolarArea(data, { scaleFontColor: "<the color you want to add>" ...和/或pristine属性：

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

以下是一个示例：

touched

希望它可以帮到你，亨利

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的角度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

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

5 个答案: