1. 首先，在Angular应用中安装Angular Form Builder模块，命令为：

npm install --save @angular/forms

2. 在Angular组件中引入Form Builder模块：

import { FormBuilder, FormGroup, Validators } from '@angular/forms';

3. 创建一个表单组件并绑定到模板：

export class RegisterFormComponent implements OnInit { registerForm: FormGroup; //声明表单组

constructor(private fb: FormBuilder, private authService: AuthService) { }

ngOnInit() { this.registerForm = this.fb.group({ 'firstName': [null, Validators.required], // 设置第一个输入框 'lastName': [null, Validators.required], // 设置第二个输入框 'email': [null, Validators.compose([Validators.required, Validators.email])], // 设置第三个输入框 'password': [null, Validators.compose([Validators.required, Validators.minLength(6)])], // 设置第四个输入框 }); }

register() { this.authService.register(this.registerForm.value).subscribe( data => console.log(data), error => console.log(error) ); } }

4. 在 HTML 模板中使用表单构建器：

5. 在ASP.NET WebAPI中，创建注册API接口：

[HttpPost("register")] public async Task Register([FromBody] UserForRegisterDto userForRegisterDto) { var userToCreate = _mapper.Map(userForRegisterDto);

var result = await _userManager.CreateAsync(userToCreate, userForRegisterDto.Password);

if(result.Succeeded) { return Ok(); }

return BadRequest(result.Errors); }

6. 编写AuthService来处理HTTP请求：

@Injectable({ providedIn: 'root' }) export class AuthService { baseUrl = environment.apiUrl;

constructor(private http: HttpClient) { }

register(model: any) { return this.http.post(this.baseUrl + 'auth/register', model); } }

7. 在ASP.NET WebAPI的Startup中配置跨域：

services.AddCors(); …

app.UseCors(x => x.AllowAnyOrigin().AllowAnyMethod().AllowAnyHeader());

这样，我们就可以在Angular和ASP.NET WebAPI之间使用表单构建器来快速创建一个用户注册表单。