时间戳

首页 > 解决方案 > Angular：更新表单......奇怪的行为

angular - Angular：更新表单......奇怪的行为

问题描述

在我的 Angular 项目中，我有一个表单来更新用户信息。我的 UserAccount 类是：

import { Useraccounttype } from './../model/useraccounttype.model';
import { Gender } from './Gender.interface';
export interface UserAccount{
    // User infos
    id?: number;
    firstName: string;
    lastName: string;
    mail: string;
    genderId: number;
    gender?: Gender;
    password: string;
    userName: string;
    login: string;
    useraccountTypeId: number;
    userAccountType?: Useraccounttype;
    name?: string;
    commercialmail?: string;
    phone?: string;
    vatnumber?: string;
}

例如，如果我只更改名字字段。当我提交表单并想读取字段以使用以下方法更新数据库时：

private executeUserAccountUpdate = (userForm) => {
    if (this.myForm.valid) {
      const user: UserAccount = {
        id: this.user.id,
        firstName: this.f.firstname.value,
        lastName: this.f.lastname.value,
        mail: this.f.mail.value,
        genderId: this.f.gender.value,
        password: this.f.password.value,
        userName: this.f.username.value,
        login: this.f.login.value,
        useraccountTypeId: this.f.useraccountType.value,
      }

      let apiUserAccount: string = environment.apiAddress + 'UserAccount/' + this.user.id;
      this.repository.update(apiUserAccount, user)
      .subscribe(response => {
        $('#successModal').modal();
      },
      (error =>{
        this.errorHandler.handleError(error);
        this.errorMessage = this.errorHandler.errorMessage;
      })
      )
    }
    else {
      console.log('Is not Valid');
    }
  }

在我的 User 对象中，字段 firstname 具有值，但其他字段为空 ('')。

Html部分：

<div class="container rounded bg-white mt-5 mb-5">
    <form [formGroup]="myForm" autocomplete="off" novalidate (ngSubmit)="updateUserAccount(myForm.value)">
    <div class="row">
        <div class="col-md-3 border-right">
            <div class="d-flex flex-column align-items-center text-center p-3 py-5">
                <img class="rounded-circle mt-5" width="150px" src="https://st3.depositphotos.com/15648834/17930/v/600/depositphotos_179308454-stock-illustration-unknown-person-silhouette-glasses-profile.jpg">
                    <span class="font-weight-bold">{{user?.firstName}} {{user?.lastName}}</span>
                    <span class="text-black-50">{{user?.mail}}</span>
                    <span></span>
                </div>
        </div>
        <div class="col-md-5 border-right">
            <div class="p-3 py-5">
                <div class="d-flex justify-content-between align-items-center mb-3">
                    <h4 class="text-right color-secondary">Profile</h4>
                </div>
                <div class="row mt-2">
                    <div class="col-md-12">
                        <app-gender name="gender" id="gender" [formGroup]="myForm" [selectedValue]="user?.gender?.description">
                            <em *ngIf="validateControl('gender') && hasError('gender', 'required')">Sélectionnez un genre</em>
                        </app-gender>      
                    </div>
                </div>
                <div class="row mt-2">
                    <div class="col-md-6"><label class="labels">Nom</label><input type="text" class="form-control" formControlName="lastname" placeholder="Nom" value="{{user?.firstName}}" >
                        <em *ngIf="validateControl('lastname') && hasError('lastname', 'required')">Nom obligatoire</em>
                    </div>
                    <div class="col-md-6"><label class="labels">Prénom</label><input type="text" class="form-control"  formControlName="firstname" value="{{user?.lastName}}" placeholder="Prénom" >
                        <em *ngIf="validateControl('firstname') && hasError('firstname', 'required')">Prénom obligatoire</em>
                    </div>
                </div>
                <div class="row mt-3">
                    <div class="col-md-12 mt-2"><label class="labels">Nom d'utilisateur</label><input type="text" class="form-control" formControlName="username" placeholder="Nom d'utilisateur" value="{{user?.userName}}" >
                        <em *ngIf="validateControl('username') && hasError('username', 'required')">Nom d'utiliateur obligatoire</em>
                    </div>
                    <div class="col-md-12 mt-2"><label class="labels">Mail</label><input type="text" class="form-control" formControlName="mail" placeholder="Mail" value="{{user?.mail}}" >
                        <em *ngIf="validateControl('mail') && hasError('mail', 'required')">Mail obligatoire</em>
                    </div>
                    <div class="col-md-12 mt-2"><label class="labels">Login</label><input type="text" class="form-control" formControlName="login" placeholder="Login" value="{{user?.login}}" >
                        <em *ngIf="validateControl('login') && hasError('login', 'required')">Login obligatoire</em>
                    </div>
                    <div class="col-md-12 mt-2"><label class="labels">Password</label><input type="text" class="form-control" formControlName="password" placeholder="Password" value="{{user?.password}}" >
                        <em *ngIf="validateControl('password') && hasError('password', 'required')">Mot de passe obligatoire</em>
                    </div>
                    <!-- <div class="col-md-12"><label class="labels">Type de compte</label><input type="text" class="form-control" formControlName="useraccountType" placeholder="enter address line 2" value="{{user?.userAccountType?.shortDescription}}" ></div> -->

                    </div>
                    <div class="row mt-3">
                        <div class="col-md-12">
                            <label class="labels">Type d'utilisateur</label>
                            <app-useraccount-type name="useraccountType" id="useraccountType" [formGroup]="myForm" [selectedType]="user?.userAccountType?.shortDescription">
                                <em *ngIf="validateControl('useraccountType') && hasError('useraccountType', 'required')">Mot de passe obligatoire</em> 
                            </app-useraccount-type>      
                        </div>

                    </div>
                <div class="row mt-3">
                    <div class="col-md-6"><label class="labels">Country</label><input type="text" class="form-control" placeholder="country" value=""></div>
                    <div class="col-md-6"><label class="labels">State/Region</label><input type="text" class="form-control" value="" placeholder="state"></div>
                </div>
                <div class="mt-5 text-center"><button class="btn btn-primary profile-button" type="submit">Sauvegarder</button></div>
            </div>
        </div>
        <div class="col-md-4">
            
        </div>
    </div>
    </form>
</div>

我不明白为什么，也不知道如何解决这个问题。

谁能解释一下并给我一个更新完整对象的解决方案。

谢谢你的帮助。

标签： angular

解决方案

这是我的问题的解决方案。我在这里找到了链接

首先要做的是使用 patchValue() 用数据填充表单。所以当我加载数据时，我必须这样做：

 public loadUserDetails = () => {
    let id: string = this.activeRoute.snapshot.params['id'];
    let apiUser: string = environment.apiAddress + 'UserAccount' + '/' + id;

    this.repository.getData(apiUser).pipe()
      .subscribe(response => {
        this.myForm.patchValue({
          firstname: (<UserAccount>response).firstName,
          lastname: (<UserAccount>response).lastName,
          mail: (<UserAccount>response).mail,
          Gender: (<UserAccount>response).genderId,
          password: (<UserAccount>response).password,
          username: (<UserAccount>response).userName,
          login: (<UserAccount>response).login,
          useraccountType: (<UserAccount>response).useraccountTypeId,
        })
      },
        (error) => {
          this.errorHandler.handleError(error);
          this.errorMessage = this.errorHandler.errorMessage;
        })
  }

当我提交表单时，我需要这样做来获取表单数据：

public updateUserAccount= () =>{
    const userAccountForm = this.myForm.value

    if(this.myForm.valid){
      this.executeUserAccountUpdate(userAccountForm)
    }
    else{
      console.log('Is not Valid');
    }
  }

希望可以帮助别人。感谢大家的帮助。

推荐阅读