[英]Restrict two way binding before submit in angular2/typescript
I have editPop up where I edit the form field in pop up. 我有editPop up ,可以在其中编辑表单字段的地方。 Meanwhile a background form is displaying.
同时,正在显示背景表格。 In that form whatever I type in editPop is displaying in background form before submit.
在那种形式下,无论我在editPop中键入什么, 都会在提交前以背景形式显示。 How can I prevent this before save function.
保存功能前如何防止这种情况。
I need that to be displayed only after save not while editing in popUp. 我需要仅在保存后才能显示,而不是在popUp中进行编辑时才显示。
I guess this is because of two way binding happening due to c.cName
. 我猜这是由于
c.cName
发生的两种方式绑定。 How can I overcome this issue. 我该如何克服这个问题。
Please help. 请帮忙。 I am here by sharing my HTML and TS code.
我在这里分享我的HTML和TS代码。
HTML code 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>
Edit button HTML 编辑按钮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 保存按钮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);
});
}
Adding to above answer you can do it like this 添加到上面的答案,你可以这样做
IN HTML 在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 在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);
});
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! 希望这有效!
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.