Question

我正在尝试对离子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视频的帮助下），我想在这里添加解决方案以帮助下一个人。具体来说，角度文档使用“更新时更改”事件来触发值的读取，但您可以直接使用返回值而无需中间步骤。（这就是我感到困惑的地方）

这是我为上述例子所得到的结果：

<强> 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中直接使用表单验证返回值

1 个答案: