Question

验证有效，但当输入错误大约为最小/最大时，我总是得到与所需链接相同的错误消息。

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

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中，您引用了变量＆＃39; useramount＆＃39;在您的组件中没有定义（它被定义为someAmount）。

此外，分配给someAmount变量的formControl未链接到表单组，因此不会将错误/更改与之关联。

您需要按如下方式调整组件代码

 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更改验证消息以指向formcontrol：

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

...此外

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

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

ngModel

那么，现在你错过了双向约束？不，我们可以只使用表单控件来处理绑定，而不需要<input mdInput formControlName="someAmount" type="number" (keyup)="onAmountChange()"/>。如果您有初始值，则可以在构建表单时进行设置：

ngModel

或者如果您收到价值＆＃34;稍后＆＃34;，您可以使用someAmount: ['initial value', [....]]（或setValue）：

patchValue

如果您需要访问该值...

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

至于没有显示的验证错误，除非你从输入字段中集中注意力，它似乎仍然是一个错误？ https://stackoverflow.com/a/39196394/7741865您可以使用this.myform.get('someAmount').value代替

md-hint

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

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

3 个答案: