Angular 5 - 有条件的文本区域
Posted
技术标签:
【中文标题】Angular 5 - 有条件的文本区域【英文标题】：Angular 5 - conditional required textarea 【发布时间】：2018-10-21 17:32:02 【问题描述】：如果复选框被点击比textarea的出现和需要的 [需要] = “otherVendorsChecked ==真真：假”强>
如果我选择复选框，比取消选择一个文本输入仍然需要。
有谁知道我在做什么错了？ P>
[编辑] 如果我删除的 * ngIf = “otherVendorsChecked == TRUE”强>比它工作正常。
我想，的垫形式的场强>仅与ngIf条件除去，因此没有更多影响到所需的属性。 P>
这是我在ngOnInit形式： 和在我fillForm我有这样的代码：<div>
<mat-checkbox [ngModelOptions]="standalone: true" [(ngModel)]="otherVendorsChecked">Other option:</mat-checkbox>
</div>
<mat-form-field *ngIf="otherVendorsChecked == true">
<textarea matInput formControlName="otherVendors" [required]="otherVendorsChecked == true ? true : false"></textarea>
</mat-form-field>
this.form = new FormGroup(
otherVendors: new FormControl('', [Validators.minLength(2)]),
...
);
this.fillForm();
this.form.controls['otherVendors'].setValue(this.lastFacilityDetailOfCalendarEvent.otherVendors);
if(this.lastFacilityDetailOfCalendarEvent.otherVendors != null && this.lastFacilityDetailOfCalendarEvent.otherVendors.length > 0)
this.otherVendorsChecked = true;
【问题讨论】：
你有没有初始化 'otherVendorsChecked' 变量？如果是的话，我可以看看吗？我觉得你是操纵在你的.ts文件otherVendorsChecked变量的地方。 SPAN> 如果垫外形字段与ngIf条件除去，不应该有在所有的textarea。如角将从html除去毡形式场完整节点。跨度> 这是我的观点太 - 我不知道为什么它不工作 SPAN> 您能看到的textarea的HTML始终？或只是“otherVendors”窗体控件始终是必需的？ SPAN> 我觉得你可能已经制成，而使用验证器或类似的东西定义它需要“otherVendors”窗体控件。例如，otherVendors =新FormControl（Validators.required）。跨度> 【参考方案1】：[已编辑]
最后，经过一点点实验，我可以看出这都是因为<mat-form-field *ngIf="otherVendorsChecked == true">。
每次更改otherVendorsChecked 值时，FormControl 将在必需和不需要之间切换。当otherVendorsChecked 为真时，您的FormControl 将更改为必需但是当otherVendorsChecked更改为false时，即使在将您的FormControl更新为不需要之前*ngIf会在触发FormControl的更改事件之前从DOM中删除textarea元素，所以现在FormControl不知道使其不需要。
为了快速修复，您可以不使用*ngIf 而是从视图中隐藏该部分/元素，也许使用display: none; 或类似的东西。
希望这会有所帮助。
【讨论】：
检查“otherVendorsChecked”是否在真假状态之间切换。然后继续你的逻辑。我看到你总是能够看到文本区域，因为“otherVendorsChecked”总是正确的。以上是关于Angular 5 - 有条件的文本区域的主要内容，如果未能解决你的问题，请参考以下文章