数字输入表单验证未显示正确的错误消息

Question

验证有效，但当输入错误约为 min/max.

时，我总是收到与 required 链接的相同错误消息

另一个问题是，只有在我第一次点击输入框外时才会显示错误消息。

component.ts

import { Component, OnInit, ChangeDetectorRef } from '@angular/core';
import { FormControl, Validators, FormBuilder, FormGroup} from '@angular/forms';

export class myClass implements OnInit {
    myform: FormGroup;

    constructor  (private _fb:FormBuilder){}

    public someAmount = new FormControl('', [Validators.required, Validators.min(10), Validators.max(300)]);

    ngOnInit():void {
        this.myform = this._fb.group({
            someAmount: ['', [Validators.required, Validators.min(10), Validators.max(300)]]
        });
    }
}

component.html

 <form novalidate [formGroup]="myform" class="col-sm-4 form-group">
     <md-input-container>
         <input mdInput id="amount"
                       name="someAmount"
                       formControlName="someAmount"
                       type="number"
                       class="form-control "
                       [(ngModel)]="amount"
                       placeholder="amount"
                       (keyup)="onAmountChange()"/>
         <md-error *ngIf="someAmount.hasError('required')">
             <span> number required </span>
         </md-error>
         <md-error *ngIf="someAmount.hasError('min')" class="top-margin-medium text-center bold alert-danger">
             <span>amount should be not less than 10 </span>
         </md-error>
         <md-error *ngIf="someAmount.hasError('max')" class="top-margin-medium text-center bold alert-danger">
             <span>amount should be not more than 300</span>
         </md-error>
     </md-input-container>
 </form>

Answer 1

我认为上面的代码主要有两个问题。

在您的 html 中，您引用的变量 'useramount' 在您的组件中没有定义（它被定义为 someAmount ）。

此外，分配给 someAmount 变量的 formControl 没有链接到表单组，因此没有 errors/changes 与之关联。

您需要调整您的组件代码如下

 export class myClass implements OnInit {
     myform: FormGroup;
     useramount:AbstractControl;

     constructor  (private _fb:FormBuilder){}

     ngOnInit():void {
         this.myform = this._fb.group({
             someAmount: ['', [Validators.required, Validators.min(40), Validators.max(300)]]
         });
         this.useramount = this.myform.get('someAmount');
     }
}

Answer 2

感谢 JeanPaul 指出 formControl 未链接到 formGroup。

我可以通过在 html:

中执行此操作来使其正常工作

   <md-error *ngIf="myform.controls['someAmount'].hasError('required')>
          <span> required error message </span>
   </md-error>
   <md-error *ngIf="myform.controls['someAmount'].hasError('min')>
          <span>min error message</span>
   </md-error>
   <md-error *ngIf="myform.controls['someAmount'].hasError('max')>
          <span>max error message</span>
   </md-error>

Answer 3

更改验证消息以指向具有以下 *ngIf 的表单控件：

*ngIf="myform.hasError('required', 'someAmount')"
*ngIf="myform.hasError('min', 'someAmount')"
*ngIf="myform.hasError('max', 'someAmount')"

此外...

虽然文档中没有明确说明它们 ngModel 和响应式形式不应该一起使用，但我们可以从 ngModel 指令不包含在 ReactiveFormsModule, 也许我们不应该一起使用它们:)

所以我建议您删除 ngModel 并且只有表单控件：

<input mdInput formControlName="someAmount"
               type="number"
               (keyup)="onAmountChange()"/>

嗯，现在你缺少双向绑定？不，我们可以只使用表单控件来处理绑定，而不需要 ngModel。如果有初始值，可以在构建表单时设置：

someAmount: ['initial value', [....]]

或者如果您收到值 "later"，您可以使用 setValue（或 patchValue）：

this.myform.controls.someAmount.setValue("new value!")

如果您需要访问值...

this.myform.get('someAmount').value

至于验证错误不显示，除非你从输入字段中聚焦，看来它仍然是一个错误？你可以用 md-hint 代替：

<md-hint *ngIf="myform.hasError('min', 'someAmount')" [ngStyle]="{'color': 'red'}"> 
   <span>amount should be not less than 10 </span> 
</md-hint>

演示：https://plnkr.co/edit/ncEjsTseFLkQsHLWU2Gr?p=preview

数字输入表单验证未显示正确的错误消息

Number Input form validation doesn't show the right error message

angular-material2

angular