forms - Angular - use formControlName on object property

Question

Here is what I have so far:

UserModel.ts

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

register.component.ts

export class RegisterComponent implements OnInit {
  registerForm: FormGroup;

  constructor(private formBuilder: FormBuilder) { }

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

register.component.html

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

What I want is to bind the input to let's say... user's first name, last name, email and so on. Is there any way to do that? Also, if I can, how do I add validators to user fields?

Answer 1

Before you bind formControlName in HTML you need to define then in you TS, like this:

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

} To know more about the validators, check this Validating reactive froms for the 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>

Finally to get the form values:

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

}