如何直接在 html 中使用表单验证 return 值

Question

我正在尝试对 ionic 2 项目进行表单验证，但在使用如下所示的 angular docs 方法时遇到问题：

<div *ngIf="formErrors.spot" >
  {{ formErrors.spot }}
</div>

直接显示验证例程返回的消息。

作为变通方法，我正在使用下面显示的方法，但我想摆脱 html

中的所有这些结构

<p *ngIf="signUpForm.controls.spot.hasError('not a whole number')">
   This is tooootally not a whole number
</p>

而是使用上面的 angular 方法来替换所有这些，这样我就不必维护两组错误消息（在验证器和 html 本身中。）

当我尝试使用 angular 方法时，似乎 formErrors 未定义。

这是代码

HTML

<ion-header>
    <ion-navbar color="dark">
        <ion-title>NEW USER SIGNUP</ion-title>
    </ion-navbar>
</ion-header>
<ion-content class="login-content" padding>
    <div>
        <form [formGroup]="signUpForm">
            <ion-list inset>
                <ion-item [class.invalid]="!signUpForm.controls.spot.valid && (signUpForm.controls.spot.dirty)">
                    <ion-input placeholder="Parking Spot Number" formControlName="spot" [(ngModel)]="registerCredentials.spot"></ion-input>
                </ion-item>
                <div *ngIf="!signUpForm.controls.spot.valid  && !signUpForm.controls.spot.pending && (signUpForm.controls.spot.dirty)">
                    <p *ngIf="signUpForm.controls.spot.hasError('too low')">
                        Seriously... waaaay too low.
                    </p>
                    <p *ngIf="signUpForm.controls.spot.hasError('too high')">
                        This is waaaay too high
                    </p>
                    <p *ngIf="signUpForm.controls.spot.hasError('not a number')">
                        This is tooootally not a number
                    </p>
                    <p *ngIf="signUpForm.controls.spot.hasError('not a whole number')">
                        This is tooootally not a whole number
                    </p>
                </div>
            </ion-list>
        </form>
    </div>
</ion-content>

这是关联的TS文件

import { Component, ViewChild } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms'
import { SpotValidator } from '../../validators/spotValidator2';
import * as moment from 'moment'

@Component({
  selector: 'page-signup',
  templateUrl: 'signup.html'
})
export class SignupPage2 {
  @ViewChild('signupSlider') signupSlider: any;
  signUpForm: FormGroup;

  private debugMode: boolean = true;
  registerCredentials = {
    spot: '',
  };

  constructor(
    public formBuilder: FormBuilder,
  ) {
    this.signUpForm = formBuilder.group({
      spot: ['', [SpotValidator.isValid]]
    });
  }
}

最后，关联验证器

import { FormControl } from '@angular/forms';

export class SpotValidator {

    static isValid(control: FormControl): any {

        if(control.value == ""){
            return null
        }

        if(isNaN(control.value)){
            return {
                "not a number": true
            };
        }

        if(control.value % 1 !== 0){
            return {
                "not a whole number": true
            };
        }

        if (control.value > 260 ){ 
            return {
                "too high": true
            };
        }

        if (control.value < 31 ){
            return {
                "too low": true
            };
        }
        return null;
    }
}

简而言之，我该如何使用它：

<div *ngIf="formErrors.spot" >
  {{ formErrors.spot }}
</div>

替换这些：

<p *ngIf="signUpForm.controls.spot.hasError('not a whole number')">
   This is tooootally not a whole number
</p>

在上面的代码中?

Answer 1

所以，我想通了。 Angular 文档不太适合我创建的模型（在 Josh Morony 视频的帮助下），我想在此处添加解决方案以帮助下一个人。具体来说，angular 文档使用“更新时更改”事件来触发读取值，但您可以直接使用返回值而无需中间步骤。（这就是我感到困惑的地方）

这就是我在上面的例子中得到的结果：

HTML

<ion-header>
    <ion-navbar color="dark">
        <ion-title>NEW USER SIGNUP</ion-title>
    </ion-navbar>
</ion-header>
<ion-content class="login-content" padding>
    <div>
        <form [formGroup]="signUpForm">
            <ion-list inset>
                <ion-item [class.invalid]="!signUpForm.controls.spot.valid && (signUpForm.controls.spot.dirty)">
                    <ion-input placeholder="Parking Spot Number" formControlName="spot" [(ngModel)]="registerCredentials.spot"></ion-input>
                </ion-item>
                <div *ngIf="!signUpForm.controls.spot.valid  && !signUpForm.controls.spot.pending && (signUpForm.controls.spot.dirty)">
                    <p *ngIf="signUpForm.controls.spot.hasError('my_error_text')">
                        {{signUpForm.controls.spot.errors.my_error_text}}
                    </p>
                </div>
            </ion-list>
        </form>
    </div>
</ion-content>

与页面关联的 TS 文件与上面相同。

最后，这是验证页面：从'@angular/forms'导入{FormControl};

export class SpotValidator {

    static isValid(control: FormControl): any {

        if(control.value == ""){
            return null
        }

        if(isNaN(control.value)){
            return {
                "my_error_text": "not a number"
            };
        }

        if(control.value % 1 !== 0){
            return {
                "my_error_text": "not a whole number"
            };
        }

        if (control.value > 260 ){ 
            return {
                "my_error_text": "too high"
            };
        }

        if (control.value < 31 ){ //this allows for test parking spots during validation.
            return {
                "my_error_text": "too low"
            };
        }

        return null;
    }

}

如何直接在 html 中使用表单验证 return 值

How to use form validation return values directly in html

forms

validation

return-value

custom-validators

ionic2