Question

我的项目中有一个模板驱动的角度形式。这是应用程序中的“编辑个人资料”部分。我正在从API填充该表单的数据（如果没有数据，则字段为空）。如果用户在该字段中键入新数据，我将获取这些数据并发布到API。它的工作没有任何问题。但是请考虑一下，如果用户未在某些字段中键入内容，而他需要使用自动填充的数据。然后，我想获取该自动填充的数据以发布给API。但是我没有发送那些自动填充的值。这就是我尝试过的。

HTML

    <div>
  <form #profileForm="ngForm" (ngSubmit)="sendUpdatedData(profileForm)">
    <div class="form-group">
      <label for="firstName">First Name</label>
      <input type="text" [(ngModel)]="firstName" class="form-control" name="firstName" placeholder="First Name" required
        value="{{profileData?.firstName}}">
    </div>

    <div class="form-group">
      <label for="lastName">Last Name</label>
      <input type="text" [(ngModel)]="lastName" class="form-control" name="lastName" placeholder="Last Name" required value="{{profileData?.lastName}}">
    </div>

    <div class="form-group">
      <label for="telephone">Telephone</label>
      <input type="text" [(ngModel)]="telephone" name="telephone" class="form-control" placeholder="Telephone" #teleph="ngModel"  maxlength="10" pattern="[0-9]+"
        value="{{profileData?.telephone}}">
    </div>

    <div class="form-group">
      <label for="mobilephone">Mobile Phone</label>
      <input type="text" [(ngModel)]="mobilephone" name="mobilephone" class="form-control" placeholder="Mobile Phone"  #mobileph="ngModel" maxlength="10" pattern="[0-9]+"
        value="{{profileData?.mobilePhone}}">
    </div>

    <button type="submit" class="btn btn-success mt-2" value="submit">UPDATE</button>

  </form>
</div>

组件TS

   ngOnInit() {
    this.getProfileData();
  }

  //Get data to auto populate fields.
  getProfileData(){
    this.profileId = localStorage.getItem('profileId' )
    return this.apiService.get("Users/id/"+ this.profileId ,true).subscribe(
      (data: any) => {   
        this.profileData= data;
      },
      error => {

      }
  );
  }

  //sending data when user clicks update button.
  sendUpdatedData(profileForm: any){

    let updatedData= {
      "id": this.userId,
      "firstName":  profileForm.value.firstName,
      "lastName": profileForm.value.lastName,
      "mobilePhone": profileForm.value.mobilephone,
      "telephone": profileForm.value.telephone,
      "organisation": profileForm.value.organisation
    }


   return this.apiService.patch("Users/update/", updatedData ,true).subscribe(
      (data: any) => {

        this.successMsg = "User data updated successfully";
      },
      (error)=>{
        this.isError = true;
        this.isSuccess = false;

        this.errMsg = error.errror.message;


      }
  );
  }
}

Answer 1

Options -MultiViews
RewriteEngine on

RewriteRule ^(.+)/edit(?:/(\d+))?/?$ $1/edit.php?tag=$2 [NC,L,QSA]

RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_FILENAME}.php -f
RewriteRule ^(.+?)/?$ $1.php [L]

您正在使用<input type="text" [(ngModel)]="profileData.firstName" class="form-control" name="firstName" placeholder="First Name" required>的双向数据绑定速记，但没有firstName可以与其绑定。使用profileData对象中的[(ngModel)]元素。

此外，您无需使用fitstName，因为value会处理它。

以Angular形式获取自动填充的值不起作用

1 个答案: