临时
import {Component, OnInit} from '@angular/core';
import {FormArray, FormBuilder, FormControl, FormGroup} from '@angular/forms';
@Component({
selector: 'app-reactived-form',
templateUrl: './reactived-form.component.html',
styleUrls: ['./reactived-form.component.css']
})
export class ReactivedFormComponent implements OnInit {
public formModel: FormGroup;
public fb: FormBuilder = new FormBuilder();
constructor() {
/* this.formModel = this.fb.group({
nickName: [''],
emails: this.fb.array([['']]),
passwordInfo: this.fb.group({
password: [''],
passwordConfirm: ['']
})
});*/
this.formModel = new FormGroup({
nickName: new FormControl(),
emails: new FormArray([new FormControl(), new FormControl()]),
passwordInfo: new FormGroup({
password: new FormControl(),
passwordConfirm: new FormControl()
}
)
});
}
createUser() {
let n = this.formModel.get('nickName') as FormControl;
console.log(n.value);
}
addEmail() {
let emails = this.formModel.get('emails') as FormArray;
emails.push(new FormControl());
console.log(this.formModel.value);
}
ngOnInit() {
}
}
<form [formGroup]="formModel" (submit)="createUser()">
<div>昵称:<input formControlName="nickName" pattern="[a-zA-Z0-9]"></div>
<div>邮箱:
<ul formArrayName="emails">
<li *ngFor="let email of formModel.get('emails').controls; let i= index">
<input [formControlName]="i">
</li>
</ul>
<button (click)="addEmail()">添加email</button></div>
<div [formGroup]="formModel.get('passwordInfo')">
<div>密码:<input formControlName="password" type="password"></div>
<div>确认密码:<input formControlName="passwordConfirm" type="password"></div>
</div>
<div>
<button type="submit">注册</button>
</div>
</form>
import {Component, OnInit} from '@angular/core';
@Component({
selector: 'app-template-form',
templateUrl: './template-form.component.html',
styleUrls: ['./template-form.component.css']
})
export class TemplateFormComponent implements OnInit {
constructor() {
}
ngOnInit() {
}
createUser(values) {
console.log('createUser');
}
}
<form #myForm="ngForm" (ngSubmit)="createUser(myForm.value)">
<div>昵称:<input ngModel name="nickname" pattern="[a-zA-Z0-9]"></div>
<div>邮箱:<input ngModel name="email" type="email"></div>
<div ngModelGroup="passwordInfo">
<div>密码:<input ngModel name="password" type="password"></div>
<div>确认密码:<input ngModel name="password" type="password"></div>
</div>
<div><button type="submit">注册</button></div>
</form>
God, Grant me the SERENITY, to accept the things I cannot change,
COURAGE to change the things I can, and the WISDOM to know the difference.
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 开发者必知的日志记录最佳实践
· SQL Server 2025 AI相关能力初探
· Linux系列:如何用 C#调用 C方法造成内存泄露
· AI与.NET技术实操系列(二):开始使用ML.NET
· 记一次.NET内存居高不下排查解决与启示
· Manus重磅发布:全球首款通用AI代理技术深度解析与实战指南
· 被坑几百块钱后,我竟然真的恢复了删除的微信聊天记录!
· 没有Manus邀请码?试试免邀请码的MGX或者开源的OpenManus吧
· 园子的第一款AI主题卫衣上架——"HELLO! HOW CAN I ASSIST YOU TODAY
· 【自荐】一款简洁、开源的在线白板工具 Drawnix