Restrict two way binding before submit in angular2/typescript

Question

I have editPop up where I edit the form field in pop up. Meanwhile a background form is displaying. In that form whatever I type in editPop is displaying in background form before submit. How can I prevent this before save function.

I need that to be displayed only after save not while editing in popUp.

I guess this is because of two way binding happening due to c.cName. How can I overcome this issue.

Please help. I am here by sharing my HTML and TS code.

HTML code

 <md-card class="col-lg-12 col-md-12 col-sm-12 col-xs-12" *ngFor="let c of cL ">
    <div class="col-lg-4 col-md-4 col-sm-4 col-xs-4">
      {{c.cName}}
    </div>
    <div class="col-lg-2 col-md-2 col-sm-2 col-xs-2" style="text-align:right;padding-right: 0px;">
   <button class="iconBtn" (click)="openC(c)">
 <md-icon svgIcon="edit" style="color: rgba(0,0,0,0.54);height: 17px;width: 17px;"></md-icon></button>
   </div>
   </md-card>

Edit button HTML

<div class="modal-body row">
                    <div class="col-lg-6 col-md-6 col-sm-6 col-xs-6">
                        <md-input-container style='width:100%'>
                            <input type="text" name="cName" mdInput [(ngModel)]="c.cName" placeholder="c" required>
                        </md-input-container>
                    </div>
  </div>

Save Button HTML

<div layout-align="end center" layout="row">
<button md-raised-button class="md-raised color-white" (click)="newC(c)" [disabled]="!cForm.form.valid" style="width: 46%;margin: 10px 5px;">Save</button>
                    </div>

Ts code:

openC(c) {
 if(c) {
    this.msg = "edit";
    this.c = c;
    this.addC.show();
 } 
}
newC(c) {
  if(c._id) {    
    this.ApiService
         .editC(c,c._id)
         .subscribe(
           cs  => {
             this.toasterService.pop('success');
             this.addC.hide();
           },);
  } 
             this.ApiService
                 .getC()
                 .subscribe(
                   cs  => {
                     this.cs = cs.map(function(c) {
                        return {"value":c._id,"label":c.cName};
                      })
                     this.toasterService.pop('success');
                     this.cL = cs;
                    },
                   error => {
                     //console.log(error);
                   });
}

Please explain the part with 'it is taking entries in the div as well'. The this div don't have entry feature. Are you meaning you still can edit the other inputs underneath the popup ? — Vega
– Vega, Commented Jul 14, 2017 at 10:06
Remove [(ngModel)] in the popup edit and manage the value with a variable. At the submit update the model with that value. — Vega
– Vega, Commented Jul 14, 2017 at 10:34

Bhrungarajni · Accepted Answer · 2017-07-17 05:47:18Z

2

Adding to above answer you can do it like this

IN HTML

<md-input-container style='width:100%'>
   <input type="text" name="cName" 
    mdInput #updatedC [value]="c.cName"  placeholder="c" required>
 </md-input-container>

IN TS

update(updateC,c) {
c.cName:updateProject.value,
 this.ApiService
 .editc(C,c)
 .subscribe(
   c  => {
     this.toasterService.pop('success');
     this.editC.hide();
     this.ApiService
         .getC(this.c._id)
         .subscribe(
           c  =>{
             this.cL = c;
           },
           error => {
             //console.log(error);
           });

edited Jul 17, 2017 at 5:47

Bhrungarajni

2,54712 gold badges51 silver badges111 bronze badges

answered Jul 17, 2017 at 5:34

Hema

9861 gold badge16 silver badges38 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Vega · Accepted Answer · 2017-07-14 11:48:17Z

1

Instead of

<input type="text" name="cName" mdInput [(ngModel)]="c.cName" placeholder="c" required>

do:

<input type="text" #updated name="cName" mdInput [value]="c.cName" placeholder="c" required">

also change to:

<md-card class="col-lg-12 col-md-12 col-sm-12 col-xs-12" *ngFor="let c of cL; let i = index">

and

<button md-raised-button class="md-raised color-white" (click)="updateValue(i, updated.value)" [disabled]="!cForm.form.valid" style="width: 46%;margin: 10px 5px;">Save</button>

and in your component:

updateValue(id, newValue){
   this.cL[id].cName = newValue;
}

Hope this works!

edited Jul 14, 2017 at 11:48

answered Jul 14, 2017 at 10:51

Vega

28.8k28 gold badges121 silver badges151 bronze badges

17 Comments

Bhrungarajni Over a year ago

ya i will try now

Bhrungarajni Over a year ago

it is working but after i change value and click on submit its not getting updated with edited value

Bhrungarajni Over a year ago

sorry not getting saved

Bhrungarajni Over a year ago

i got this error : "Cannot set property 'name' of undefined"

Bhrungarajni Over a year ago

ya it is in same html

|

Collectives™ on Stack Overflow

Restrict two way binding before submit in angular2/typescript

2 Answers 2

Comments

17 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

17 Comments

Your Answer

Sign up or log in

Post as a guest

Related