在angular2/typescript中提交前限制雙向綁定

我有editPop up我在彈出窗口中編輯表單域。同時顯示背景表單。在那種形式下，無論我輸入什麼，編輯頁面在提交之前以背景形式顯示。如何在保存功能之前防止這種情況發生。在angular2/typescript中提交前限制雙向綁定

我需要在彈出窗口中進行編輯時才保存而不是顯示。

我想這是因爲c.cName發生雙向綁定。我怎樣才能克服這個問題。

請幫忙。我在這裏分享我的HTML和TS代碼。

HTML代碼

<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>

編輯按鈕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>

保存按鈕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碼：

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); 
        }); 
}

來源

2017-07-14 Bhrungarajni

請「它正在條目解釋該部分該分區以及'。這個div沒有入口功能。你是否意味着你仍然可以編輯彈出下面的其他輸入？ – Vega

請看看問題已更新 – Bhrungarajni

刪除彈出窗口中的[（ngModel）]，並用變量管理該值。在提交時使用該值更新模型。 – Vega

添加到上面的回答，你可以做這樣的

在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); 
      });

來源

2017-07-17 05:34:44 Hema

而不是

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

做：

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

也更改爲：

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

和

<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>

，並在您的組件：

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

希望這個作品！

來源

2017-07-14 10:51:52 Vega

雅我現在會嘗試 – Bhrungarajni

它正在工作，但我改變了價值後，點擊提交它沒有得到編輯值更新 – Bhrungarajni

雅我還將更新我的代碼保存按鈕 – Bhrungarajni

在angular2/typescript中提交前限制雙向綁定

回答

相關問題