更新 Ionic 后的表单验证

Question

我有一个表单验证工作，但在更新 Ionic 后不起作用。这是我的代码：

form.html

<ion-header>
    <ion-navbar>
        <ion-title>
            Authorization Form Demo
        </ion-title>
    </ion-navbar>
</ion-header>

<ion-content class="home" padding>
    <form [ngFormModel]="authForm" (ngSubmit)="onSubmit(authForm.value)">
        <ion-item [class.error]="!username.valid && username.touched">
            <ion-label floating>Username</ion-label>
            <ion-input type="text" value="" [ngFormControl]="username"></ion-input>         
        </ion-item>
        <div *ngIf="username.hasError('required') && username.touched" 
            class="error-box">* Username is required!</div>
        <div *ngIf="username.hasError('minlength') && username.touched" 
            class="error-box">* Minimum username length is 8!</div>            
        <div *ngIf="username.hasError('checkFirstCharacterValidator') && username.touched" 
            class="error-box">* Username cant't start with number!</div>                       
        <ion-item [class.error]="!password.valid && password.touched">
            <ion-label floating>Password</ion-label>
            <ion-input type="text" value="" [ngFormControl]="password" ></ion-input>
        </ion-item>
        <div *ngIf="password.hasError('required') && password.touched" 
            class="error-box">* Password is required</div>    
        <div *ngIf="password.hasError('minlength') && password.touched" 
            class="error-box">* Minimum password length is 8!</div>                     
        <div *ngIf="password.hasError('checkFirstCharacterValidator') && password.touched" 
            class="error-box">* Password cant't start with number!</div>             
        <br/><br/> 
        <button type="submit" class="custom-button" [disabled]="!authForm.valid" block>Submit</button>
    </form>
</ion-content>

form.ts

import {Component} from '@angular/core';
import {NavController} from 'ionic-angular';
import {FORM_DIRECTIVES, FormBuilder,  ControlGroup, Validators, AbstractControl} from '@angular/common';
import {CustomValidators} from '../validators/CustomValidators';


@Component({
    templateUrl: 'build/pages/form/form.html',
    directives: [FORM_DIRECTIVES]
})

export class FormPage {

    authForm: ControlGroup;
    username: AbstractControl;
    password: AbstractControl;

    constructor(private navController: NavController, private fb: FormBuilder) {
        this.authForm = fb.group({  
            'username': ['', Validators.compose([Validators.required, Validators.minLength(8), CustomValidators.checkFirstCharacterValidator])],
            'password': ['', Validators.compose([Validators.required, Validators.minLength(8), CustomValidators.checkFirstCharacterValidator])]
        });

        this.username = this.authForm.controls['username'];     
        this.password = this.authForm.controls['password'];  
    }

    onSubmit(value: string): void { 
        if(this.authForm.valid) {
            console.log('Submitted value: ', value);
        }
    }   
}

CustomValidators.ts

import { Control, ControlGroup } from "@angular/common";

interface ValidationResult {
    [key: string]: boolean;
}

export class CustomValidators {

    public static checkFirstCharacterValidator(control: Control): ValidationResult {
        var valid = /^\d/.test(control.value);
        if (valid) {
            return {checkFirstCharacterValidator: true};
        }
        return null;
    }
}

有人知道我需要做哪些改变才能正常工作吗？提前致谢。

此致。

Answer 1

Ionic2 的 Beta11 对表单处理进行了重大更改，您可以阅读更多内容 here。

form.ts 编辑两行如下所示：

import {FORM_DIRECTIVES, FormBuilder,  FormGroup, Validators, AbstractControl} from '@angular/forms';
authForm: FormGroup;

您需要从 @angular/forms 而不是已弃用的 @angular/common 导入新的表单组件，并将已弃用的 ControlGroup 更改为 FormGroup

在form.html中编辑一行为：

<form [formGroup]="authForm" (ngSubmit)="onSubmit(authForm.value)" novalidate>

将弃用的 ngFormModel 更改为 formGroup 并考虑将 novalidate 属性添加到您的表单。

为了使您的自定义验证器正常工作，您还必须更改 CustomValidators.ts 中的两行，但我没有时间阅读所有更改并且之前从未使用过自定义验证器。所以这可能需要更多的工作

import { FormControl, FormGroup } from "@angular/forms";
public static checkFirstCharacterValidator(control: FormControl): ValidationResult {

更新 Ionic 后的表单验证

Form Validation after updating Ionic

ionic-framework

ionic2