角度形式发送空数据

Question

我从角度以表格形式将数据发送到服务器时遇到问题，我可以从数据库获取用户当前数据并显示它们，但我无法将数据发送回，而是发送空值。

屏幕截图

playload of sending data to server

profile edit page with current data

码

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 }
    );
  }

知道为什么它发送空数据以及如何解决它吗？

Answer 1

不要使用HTML值属性设置用户值，Angular反应形式控件的源是类，因此在html中设置值不会将值添加到formControl实例中。 如果要动态将Value设置为输入字段，则可以使用setValue或patchValue方法。

  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);
    });

欲了解更多信息

例