如何在Angular4中的onsubmit表单函数中获取预填充的数据字段值?

时间:2017-10-30 07:06:13

标签: angular typescript

我在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()">&nbsp;
                                    <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函数中获取已更改(修改)的值以及未更改的字段值(已预先填充)。这是我的代码:

1 个答案:

答案 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()">&nbsp;
                                    <input type="submit" class="item_add hoverClass" value="Cancel" (click)="cancel()" [hidden]="cancelOption">
                                         <div class="occasion-cart" align="center" [hidden]="empty">
            </div>
                                    </form>