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

Question

我有editPop up ，可以在其中編輯表單字段的地方。 同時，正在顯示背景表格。 在那種形式下，無論我在editPop中鍵入什么， 都會在提交前以背景形式顯示。 保存功能前如何防止這種情況。

我需要僅在保存后才能顯示，而不是在popUp中進行編輯時才顯示。

我猜這是由於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>

驗證碼：

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

Answer 1

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

在HTML中

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

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

Answer 2

代替

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

希望這有效！