要使用Angular的响应式方式动态添加联系人号码,可以按照以下步骤进行:
import { Component } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
@Component({
selector: 'app-contact',
templateUrl: './contact.component.html',
styleUrls: ['./contact.component.css']
})
export class ContactComponent {
contactForm: FormGroup;
constructor(private fb: FormBuilder) {
this.contactForm = this.fb.group({
phoneNumber: ['', Validators.required]
});
}
addContact() {
if (this.contactForm.valid) {
const phoneNumber = this.contactForm.value.phoneNumber;
// 在这里执行添加联系人号码的操作,可以将其存储到一个数组中或发送到服务器等
console.log('添加联系人号码:', phoneNumber);
this.contactForm.reset();
}
}
}
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { ContactComponent } from './contact.component';
@NgModule({
declarations: [ContactComponent],
imports: [
CommonModule,
FormsModule,
ReactiveFormsModule
],
exports: [ContactComponent]
})
export class ContactModule { }
现在,当用户在输入框中输入联系人号码并点击“添加联系人”按钮时,将触发addContact()方法,并将联系人号码添加到相应的数据结构中(可以是数组、数据库等)。