Angular form sends empty data

Question

I have problem with sending data to server from my form in angular, i can get user current data from database and show them but i am not able to send data back, instead it sends empty values.

Screenshots

playload of sending data to server

profile edit page with current data

Code

HTML

<form [formGroup]="userUpdate" (ngSubmit)="update()" *ngIf="user">
    <ion-item class="ion-margin-top">
      <ion-label position="floating">Name</ion-label>
      <ion-input type="text" [value]="user.name" formControlName="name"></ion-input>
    </ion-item>
    //rest of the fields
    <ion-button class="ion-margin-top" type="submit" expand="full" color="success" >Update</ion-button>
</form>

profile.page.ts

export class ProfilePage implements OnInit {

  public userUpdate: FormGroup;
  imageURI: any;
  user = null;

  constructor(
    private authService: AuthService,
    private navCtrl: NavController,
    private menu: MenuController,
    private modalController: ModalController,
    private alertService: AlertService,
    private alertCtrl: AlertController,
    public formBuilder: FormBuilder,
    private camera: Camera,
  ) {
    this.userUpdate = this.formBuilder.group({
      name: ['', [Validators.required]],
      username: ['', [Validators.required]],
      email: ['', [Validators.email, Validators.required]],
      password: ['', Validators.required],
      phone: ['', [Validators.required]],
      avatar: ['', [Validators.required]],
    });
  }

  ngOnInit() {
    this.menu.enable(true);
  }

  ionViewWillEnter() {
    this.authService.getToken().then(() => {
      if (this.authService.isLoggedIn) {
        this.navCtrl.navigateRoot('/profile');
      }
    });

    this.authService.user().subscribe((user: any) => {
      this.user = user.success;
      console.log('user success', user.success);
    });
  }

  update() {
    const userUpdate = this.userUpdate.value;
    this.authService.update(
      userUpdate.name,
      userUpdate.username,
      userUpdate.email,
      userUpdate.password,
      userUpdate.phone,
      userUpdate.avatar = this.imageURI
      ).subscribe(
      data => {
        this.alertService.presentToast(data);
      },
      error => {
        this.alertService.presentToast(error);
      }
    );
  }
}

profile.service.ts

update(
    name: String,
    username: String,
    email: String,
    password: String,
    phone: String,
    avatar: String
    ) {
    const headers = new HttpHeaders({
      'Accept': 'application/json, text/plain',
      'Content-Type': 'application/json',
      'Authorization': 'Bearer' + " " + this.token.success.token
    });
    return this.http.post(this.env.BASE_URL + '/updateUser',
      {
        name: name,
        username: username,
        email: email,
        password: password,
        phone: phone,
        avatar: avatar
      }, { headers: headers }
    );
  }

Any idea why it sends empty data and how to fix it?

Answer 1

Don't set user value using HTML value attribute, Angular reactive form source of control is class so setting value in html does not add the value to formControl instance. Instead you can use setValue or patchValue method if you want to set Value dynamically to input field.

  this.authService.user().subscribe((user: any) => {
      this.user = user.success;
      this.userUpdate.patchValue({
            name:user.name,
            username: user.username ,//Assuming user object has username property
            email: user.email,
            password: user.password ,
            phone: user.phone
     });
      console.log('user success', user.success);
    });

For More Info

Example