要构建一个 Angular 表单构建器来验证美国电话号码的正则表达式,可以按照以下步骤进行操作。
ng generate component PhoneNumberForm
import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
@Component({
selector: 'app-phone-number-form',
templateUrl: './phone-number-form.component.html',
styleUrls: ['./phone-number-form.component.css']
})
export class PhoneNumberFormComponent implements OnInit {
phoneNumberForm: FormGroup;
constructor(private formBuilder: FormBuilder) { }
ngOnInit() {
this.phoneNumberForm = this.formBuilder.group({
phoneNumber: ['', [Validators.required, this.phoneNumberValidator]]
});
}
phoneNumberValidator(control) {
const phoneNumberRegex = /^\(\d{3}\) \d{3}-\d{4}$/;
if (!phoneNumberRegex.test(control.value)) {
return { invalidPhoneNumber: true };
}
return null;
}
submitForm() {
console.log(this.phoneNumberForm.value);
}
}
这样,你就创建了一个具有表单构建器和自定义验证器的 Angular 表单组件,可以验证美国电话号码的格式是否正确。