我在angular4工作。我需要显示一个包含用户预填充数据的表单，当用户想要更改数据时，我有
onSubmit(userForm: NgForm) {
console.log("userform",userForm.value);
this.next=false;
var obj = this.storage.retrieve('loginInfo');
var userId = obj.user_id;
console.log(userId);
let headers = new Headers();
this.createAuthorizationHeader(headers);
console.log(userForm.value);
var location = this.storage.retrieve('location');
console.log("location",this.information[0].billing.address_1);
if (this.information[0].billing.address_1!='') {
console.log("if block");
var data = {
"billing": {
"address_1": this.information[0].billing.address1,
"address_2": "",
"city": this.information[0].billing.city1,
"state":this.information[0].billing.state1,
"postcode": this.information[0].billing.postCode1,
"country": this.information[0].billing.country1,
"phone": this.information[0].billing.phone
},
"shipping": {
"address_1": this.information[0].shipping.address2,
"address_2": "",
"city": this.information[0].shipping.city2,
"state": this.information[0].shipping.state2,
"postcode": this.information[0].shipping.postCode2,
"country":this.information[0].shipping.country2
},
}
console.log("data1",data);
}
else {
console.log("else block");
var data = {
"billing": {
"address_1": userForm.value.address1,
"address_2": "",
"city": userForm.value.city1,
"state": userForm.value.state1,
"postcode": userForm.value.postCode1,
"country": userForm.value.country1,
"phone": userForm.value.phone
},
"shipping": {
"address_1": userForm.value.address2,
"address_2": "",
"city": userForm.value.city2,
"state": userForm.value.state2,
"postcode": userForm.value.postCode2,
"country": userForm.value.country2
},
}
console.log("data2",data);
}
this.http.put(SharedServiceService.getCustomer + userId, data, {
headers: headers
})
.subscribe(
data => {
this.userData = data.json();
console.log(this.userData);
this.storage.store('userInformation', this.userData);
var arr = data.json();
// this.savedData=false;
// this.editData=true;
this.userInfo.push(arr);
console.log("address ", this.userInfo);
this.phone = this.userInfo[0].billing.phone;
this.name = this.userInfo[0].username;
this.email = this.userInfo[0].email;
this.billing = this.userInfo[0].billing;
this.shipping = this.userInfo[0].shipping;
},
err => {
console.log("ERROR!: ", err);
})
}<div class="col-md-8 col-md-offset-2 mail-grid-left " data-wow-delay=".5s">
<form [hidden]="savedData">
<!-- <span style="text-align:left">Name:</span>-->
<input type="text" value="{{name}}" required="" name="name" disabled>
<!-- <label>Email:</label>-->
<input type="email" value="{{email}}" required="" name="email" disabled>
<!-- <label>Telephone:</label>-->
<input type="tel" placeholder="Telephone" value="{{phone}}" required="" disabled>
<label style="color:#DE865D">Billing Address:</label>
<textarea type="text" placeholder="Billing Address..." required="" disabled name="shippingAdd" value="{{billing.address_1}},{{billing.phone}},{{billing.city}},{{billing.state}},{{billing.country}}"></textarea>
<label style="color:#DE865D">Shipping Address:</label>
<textarea type="text" placeholder="Shipping Address..." required="" name="billingAdd" value="{{shipping.address_1}},{{shipping.city}},{{shipping.state}},{{shipping.country}}" disabled></textarea>
<div class="occasion-cart" align="center">
<div class="row">
<a class="item_add" class="hoverClass" previousStep (click)="change()" style="cursor:pointer">Change</a>
<a class="item_add" class="hoverClass" style="cursor:pointer" nextStep (click)="windowTop()">Next</a>
</div>
</div>
</form>
<form [hidden]="editData" #userForm="ngForm" (ngSubmit)="onSubmit(userForm)">
<!-- <label>Name:</label>-->
<input type="text" value="{{name}}" placeholder="Enter name" required="" name="name" ngModel>
<!-- <label>Email:</label>-->
<input type="email" value="{{email}}" required="" placeholder="Enter email" name="email" ngModel>
<!-- <label>Telephone:</label>-->
<input type="tel" placeholder="Telephone" placeholder="Enter phone" required="" value="{{phone}}" name="phone" ngModel>
<div class="row">
<div class="col-md-6">
<label style="color:#DE865D">Billing Address</label>
<hr>
<!-- <label>Address:</label>-->
<textarea type="text" placeholder="Billing Address..." required="" name="address1" value="{{billing.address_1}}" placeholder="Billing Address" ngModel></textarea>
<!-- <label>City:</label>-->
<select class="form-control" placeholder="choose city" value="{{billing.city}}" name="city1" id="city1" ngModel>
<option value="" disabled selected hidden>Choose city</option>
<option *ngFor="let data of cities" >{{data}}</option>
</select><br>
<!-- <label>State:</label>-->
<select class="form-control" placeholder="choose state" value="{{billing.state}}" name="state1" id="state1" ngModel>
<option value="" disabled selected hidden>Choose state</option>
<option *ngFor="let data of states" >{{data}}</option>
</select><br>
<input type="text" value="{{billing.postcode}}" placeholder="Enter postcode" required="" name="postCode1"><br> <br>
<!-- <label>Country:</label>-->
<select class="form-control" placeholder="choose country" name="country1" value="{{billing.country}}" id="country1" ngModel>
<option value="" disabled selected hidden>Choose country</option>
<option *ngFor="let data of countries" >{{data}}</option>
</select>
<br>
</div>
<div class="col-md-6">
<label style="color:#DE865D">Shipping Address</label>
<hr>
<textarea type="text" placeholder="Shipping Address..." required="" name="address2" value="{{shipping.address_1}}" ngModel></textarea>
<select class="form-control" value="{{shipping.city}}" placeholder="choose city" name="city2" ngModel>
<option value="" disabled selected hidden>Choose city</option>
<option *ngFor="let data of cities" >{{data}}</option>
</select><br>
<select class="form-control" value="{{shipping.state}}" placeholder="choose state" name="state2" ngModel>
<option value="" disabled selected hidden>Choose state</option>
<option *ngFor="let data of states" >{{data}}</option>
</select><br>
<input type="text" value="{{shipping.postcode}}" required="" placeholder="Enter postcode" name="postCode2" ngModel>
<br>
<br>
<select class="form-control" value="{{shipping.country}}" name="country2" placeholder="choose country" ngModel>
<option value="" disabled selected hidden>Choose country</option>
<option *ngFor="let data of countries" >{{data}}</option>
</select>
</div>
</div>
<br>
<input type="submit" class="item_add hoverClass" value="Add" nextStep (click)="windowTop()">
<input type="submit" class="item_add hoverClass" value="Cancel" (click)="cancel()" [hidden]="cancelOption">
<div class="occasion-cart" align="center" [hidden]="empty">
</div>
</form>
</div>
编写了另一个用于编辑数据的表单。我已经编写了onsubmit函数来编辑表单，我需要获取表单中存在的所有字段值。我的问题是Iam获取用户已更改的字段的值，但是不是带有预填充数据的剩余字段。我需要在onsubmit函数中获取已更改（修改）的值以及未更改的字段值（已预先填充）。这是我的代码：
答案 0 :(得分：0)
您需要将[（ngModel）]放在表格的每个字段中，如下所示：
<form [hidden]="editData" #userForm="ngForm" (ngSubmit)="onSubmit(userForm)">
<!-- <label>Name:</label>-->
<input type="text" value="{{name}}" placeholder="Enter name" required="" name="name" [(ngModel)]="name">
<!-- <label>Email:</label>-->
<input type="email" value="{{email}}" required="" placeholder="Enter email" name="email" [(ngModel)]="email">
<!-- <label>Telephone:</label>-->
<input type="tel" placeholder="Telephone" placeholder="Enter phone" required="" value="{{phone}}" name="phone" [(ngModel)]="phone">
<div class="row">
<div class="col-md-6">
<label style="color:#DE865D">Billing Address</label>
<hr>
<!-- <label>Address:</label>-->
<textarea type="text" placeholder="Billing Address..." required="" name="address1" value="{{billing.address_1}}" placeholder="Billing Address" [(ngModel)]="billing.address_1"></textarea>
<!-- <label>City:</label>-->
<select class="form-control" placeholder="choose city" value="{{billing.city}}" name="city1" id="city1" [(ngModel)]="billing.city">
<option value="" disabled selected hidden>Choose city</option>
<option *ngFor="let data of cities" >{{data}}</option>
</select><br>
<!-- <label>State:</label>-->
<select class="form-control" placeholder="choose state" value="{{billing.state}}" name="state1" id="state1" [(ngModel)]="billing.state">
<option value="" disabled selected hidden>Choose state</option>
<option *ngFor="let data of states" >{{data}}</option>
</select><br>
<input type="text" value="{{billing.postcode}}" placeholder="Enter postcode" required="" name="postCode1" [(ngModel)]="billing.postcode"><br> <br>
<!-- <label>Country:</label>-->
<select class="form-control" placeholder="choose country" name="country1" value="{{billing.country}}" id="country1" [(ngModel)]="billing.country">
<option value="" disabled selected hidden>Choose country</option>
<option *ngFor="let data of countries" >{{data}}</option>
</select>
<br>
</div>
<div class="col-md-6">
<label style="color:#DE865D">Shipping Address</label>
<hr>
<textarea type="text" placeholder="Shipping Address..." required="" name="address2" value="{{shipping.address_1}}" [(ngModel)]="shipping.address_1"></textarea>
<select class="form-control" value="{{shipping.city}}" placeholder="choose city" name="city2" [(ngModel)]="shipping.city">
<option value="" disabled selected hidden>Choose city</option>
<option *ngFor="let data of cities" >{{data}}</option>
</select><br>
<select class="form-control" value="{{shipping.state}}" placeholder="choose state" name="state2" [(ngModel)]="shipping.state">
<option value="" disabled selected hidden>Choose state</option>
<option *ngFor="let data of states" >{{data}}</option>
</select><br>
<input type="text" value="{{shipping.postcode}}" required="" placeholder="Enter postcode" name="postCode2" [(ngModel)]="shipping.postcode">
<br>
<br>
<select class="form-control" value="{{shipping.country}}" name="country2" placeholder="choose country" [(ngModel)]="shipping.country">
<option value="" disabled selected hidden>Choose country</option>
<option *ngFor="let data of countries" >{{data}}</option>
</select>
</div>
</div>
<br>
<input type="submit" class="item_add hoverClass" value="Add" nextStep (click)="windowTop()">
<input type="submit" class="item_add hoverClass" value="Cancel" (click)="cancel()" [hidden]="cancelOption">
<div class="occasion-cart" align="center" [hidden]="empty">
</div>
</form>