Angular - 在 object 屬性上使用 formControlName

Question

這是我到目前為止所擁有的：

用戶模型.ts

export class UserModel {
  id?: string = null;
  firstName = 'firstName';
  lastName = '';
  email = '';
  county = '';
  city = '';
  phone = '';
  password = '';
  role = '';
}

注冊.component.ts

export class RegisterComponent implements OnInit {
  registerForm: FormGroup;

  constructor(private formBuilder: FormBuilder) { }

  ngOnInit(): void {
    this.registerForm = this.formBuilder.group({
      user: new UserModel()
    });
  }

注冊.component.html

<form [formGroup]="registerForm">
  Value: {{registerForm.value.user | json}}
  <hr>
  <input type="text" formControlName="whatever I should put here">
</form>

我想要的是將輸入綁定到比方說...用戶的名字、姓氏、email 等等。 有什么辦法嗎？ 另外，如果可以的話，如何將驗證器添加到用戶字段？

Answer 1

在 HTML 中綁定 formControlName 之前，您需要在 TS 中定義 then，如下所示：

ngOnInit(): void {
this.registerForm = this.formBuilder.group({
  id: ['', Validators.required],
  firstName: ['', Validators.required],
  email: ['', Validators.email],
  // Other fields
});

要了解有關驗證器的更多信息，請查看 HTML 的驗證響應式：

<form [formGroup]="registerForm"  (ngSubmit)="register()">
      <input type="text" placeholder="type your first name" formControlName="firstname">
      <input type="email" placeholder="you Email" formControlName="email">
      <!--Other fields-->
 </form>

最后獲取表單值：

register() {
console.log(this.registerForm.value);
if(this.loginForm.invalid){
  return;
}
// Create a User instance with the form value ...

}