[英]Angular 2+ unbind properties in ngIf
I have a form with a datepicker. 我有一个带日期选择器的表格。 On certain days of data entry, additional fields will be shown.
在输入数据的某些天,将显示其他字段。 For instance
例如
<div *ngIf="ticketDate.getDay() === 0"
Inside of this div, I am binding to some optional properties on my model. 在此div内部,我将绑定到模型上的一些可选属性。 However, if the user changes the date picker to a different date after entering data, the contents of the div are no longer visible but the properties remain set on my model.
但是,如果用户在输入数据后将日期选择器更改为其他日期,则div的内容将不再可见,但属性仍在模型中设置。
Is there an idiomatic way to unbind properties that are bound inside an *ngIf
when it is false? 是否有一种惯用的方式来解除绑定
*ngIf
内部的*ngIf
如果为false)?
You could set a template reference variable #myDiv
on the div
element: 您可以在
div
元素上设置模板引用变量#myDiv
:
<div #myDiv *ngIf="ticketDate.getDay() === 0">
and monitor the presence of the element with ViewChildren
and the QueryList.changes
event. 并使用
ViewChildren
和QueryList.changes
事件监视元素的存在。 The model properties could be reset when the div
is removed from the DOM: 当从DOM中删除
div
时,可以重置模型属性:
@ViewChildren("myDiv") myDivList: QueryList<ElementRef>;
value1: string;
value2: string;
value3: string;
constructor(private changeDetectorRef: ChangeDetectorRef) { }
ngAfterViewInit() {
this.myDivList.changes.subscribe((list) => {
if (!list.length) {
this.value1 = undefined;
this.value2 = undefined;
this.value3 = undefined;
this.changeDetectorRef.detectChanges();
}
});
}
See this stackblitz for a demo. 有关演示,请参见此堆叠闪电战 。 The method
ChangeDetectorRef.detectChanges
is called to prevent an Angular exception. 调用方法
ChangeDetectorRef.detectChanges
可以防止Angular异常。
You say that you are using a form, apparently a template driven form if you are using ngModel
. 您说您使用的是表单,如果使用的是
ngModel
,则显然是模板驱动的表单。 You could just not use [(ngModel)]
and instead use ngModel
. 您不能只使用
[(ngModel)]
而是使用ngModel
。 Then there is no need to reset values. 这样就无需重置值。 If the part of template is not visible, it will not be included in the form at all.
如果模板的一部分不可见,则它将完全不包含在表单中。 If that is a suitable option, I suggest the following (demo is modified version of ConnorsFan's stackblitz):
如果那是一个合适的选择,我建议以下内容(演示是ConnorsFan的stackblitz的修改版本):
<form #myForm="ngForm" (ngSubmit)="onSubmit(myForm.value)">
<div *ngIf="ticketDate.getDay() === 0">
Value1: <input ngModel name="value1">
Value2: <input ngModel name="value2">
</div>
<button type="submit">Submit</button>
</form>
Name (all) the form fields like you want, and in the structure you want, so that when you submit your form, the form object corresponds to the model you want. 命名(所有)所需的表单字段,并在所需的结构中命名,以便在提交表单时,表单对象与所需的模型相对应。 So the above form values submitted would be (if condition is true):
因此,以上提交的表单值将是(如果条件为真):
{
"value1": "some value",
"value2": "some value"
}
DEMO: https://stackblitz.com/edit/angular-sxwbsd?file=src%2Fapp%2Fapp.component.html 演示: https : //stackblitz.com/edit/angular-sxwbsd? file = src%2Fapp% 2Fapp.component.html
PS: if you need reference to the form in your ts file at some point you can use ViewChild
as seen in the demo. PS:如果您需要在ts文件中引用表单,可以使用
ViewChild
中所示的ViewChild
。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.