如何为另一个模型数据添加验证器，如反应式表单

Question

Model.ts

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

注册.ts

import {Model} from './Model.ts';
export class RegistrationComponent{
ngOnInit(){
public objModel:Model;
}
saveClick(){
}
}

注册.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);
}
}
}

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