Angular 5 - 有条件的文本区域

Question

如果复选框被点击比textarea的出现和需要的 [需要] = “otherVendorsChecked ==真真：假”强> 如果我选择复选框，比取消选择一个文本输入仍然需要。 有谁知道我在做什么错了？ P>

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

[编辑]

如果我删除的 * ngIf = “otherVendorsChecked == TRUE”强>比它工作正常。 我想，的垫形式的场强>仅与ngIf条件除去，因此没有更多影响到所需的属性。 P>

这是我在ngOnInit形式：

this.form = new FormGroup({
  otherVendors: new FormControl('', [Validators.minLength(2)]),
  ...
});
this.fillForm();

和在我fillForm我有这样的代码：

this.form.controls['otherVendors'].setValue(this.lastFacilityDetailOfCalendarEvent.otherVendors);
    if(this.lastFacilityDetailOfCalendarEvent.otherVendors != null && this.lastFacilityDetailOfCalendarEvent.otherVendors.length > 0) {
      this.otherVendorsChecked = true;
    }

Answer 1

[已编辑]

最后，经过一点点实验，我可以看出这都是因为<mat-form-field *ngIf="otherVendorsChecked == true">。

每次更改otherVendorsChecked 值时，FormControl 将在必需和不需要之间切换。当otherVendorsChecked 为真时，您的FormControl 将更改为必需但是当otherVendorsChecked更改为false时，即使在将您的FormControl更新为不需要之前*ngIf会在触发FormControl的更改事件之前从DOM中删除textarea元素，所以现在FormControl不知道使其不需要。

为了快速修复，您可以不使用*ngIf 而是从视图中隐藏该部分/元素，也许使用display: none; 或类似的东西。

希望这会有所帮助。