如何从 FormGroup 获取值输入表单

Question

Good day, guys I'd like to find the solution to solve my problem. I have a FormGroup like this :

  profileForm  = new FormGroup({ 
    username   : new FormControl(),
    firstname  : new FormControl(),
    lastname   : new FormControl(),
    email      : new FormControl(),
    password   : new FormControl(),
  }); 

And I'd like to get the value by using :

const user = {
  firstname : this.profileForm.get('firstname').value,
  lastname  : this.profileForm.get('lastname').value,
  username  : this.profileForm.get('username').value,
  email     : this.profileForm.get('email').value,
  password  : this.profileForm.get('password').value
}
console.log(user)

But I got null value for each input form. But the value exists in the HTML form input :

<input name="username" matInput placeholder="Username" formControlName="username" [readonly]="true" value="{{details?.data.username}}" >

Help me to fix this, thank you.

Answer 1

Your mistake is that you access the Formgroup (which is basically an object which contains all formControls), which don't contain the value. You should be access controls of the Form group. An example:

this.profileForm.controls.username.value

Answer 2

I think value="{{details?.data.username}}" is not binding value back to you. It just prints the value in dom.

I assume you getting data details?.data.username in ngOnInit() ( or may be somewhere else) from there you can bind to your form like this

this.profileForm.get('firstname').setValue(details?.data.username)

and remove this value="{{details?.data.username}}" from html.