Question

Model.ts

export class Model{
    name:string;
    phone:number;
}

registration.ts

import {Model} from './Model.ts';

export class RegistrationComponent{

    ngOnInit(){
        public objModel:Model;
    }
    saveClick(){

    }
}

registration.html

<input type="text" [(ngModel)]="objModel.name" />
<input type="phone" [(ngModel)]="objModel.phone" />
<button (click)="saveClick()">Save</button>

我正在使用[（ngModel）]创建一个带有外部模型控件的表单。我如何添加像所需的验证，像角度2的反应形式/模型驱动形式方法的最小长度。我正在做...？

Answer 1

您应该使用FormGroup。

使用[formGroup]="myForm"。只有满足每个字段的验证器时，才可以提交请求。后者通过formControlName链接。该按钮将被禁用，直到满足所有验证器。

<强> registration.component.html：

<form [formGroup]="registrationForm" (ngSubmit)="onSubmit()">
    <p class="form-group">
        <label for="username">Name</label>
        <input
                id="name"
                type="text"
                name="name"
                formControlName="name"
                value=""
                class="form-control"
        />
        <span class="invalid-feedback">
          Please provide a valid name.
        </span>
    </p>
    <p class="form-group">
        <label for="phone">Telephone</label>
        <input
                id="telephone"
                type="text"
                name="telephone"
                formControlName="telephone"
                value=""
                class="form-control"
        />
        <span class="invalid-feedback">
          Please provide a valid telephone number.
        </span>
    </p>
    <p>
        <button
                type="submit"
                class="btn btn-primary btn-block"
                [disabled]="!registrationForm.valid"
                translate
        >Sign In</button>
    </p>
</form>

<强> registration.component.ts ：

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

export interface Model {
    name?: string;
    telephone?: string;
}

@Component({
    selector: 'app-registration-form',
    templateUrl: './registration.component.html'
})
export class RegistrationComponent implements OnInit {

    registrationForm: FormGroup;

    ngOnInit() {
        if (
            this.registrationForm === undefined ||
            this.registrationForm === null
        ) {
            this.registrationForm = new FormGroup( {
                name: new FormControl('', Validators.required, Validators.minLength(1)),
                telephone:new FormControl('', Validators.required, Validators.minLength(1))
            });
        }
    }

    onSubmit() {

        if ( this.registrationForm.valid ) {

            const formValue = this.registrationForm.value;

            const model: Model = {
                name: formValue.name,
                telephone: formValue.telephone
            };

            console.log('model', model);
        }
    }

}

您可以阅读更多here。您可以使用任何类型的验证器，也可以构建您的验证器。例如，您可以将正则表达式应用于您的电话号码，以使用Validators.Pattern('yourRegxTelephonePattern')了解输入是否有效。

如何为另一个模型数据添加活动表单等验证器

1 个答案: