onChange功能仅在第二次单击时起作用

Question

我有一个表单，当从下拉列表中选择"其他"时，我需要额外的描述输入来显示，但对于当前功能，这只适用于第二次选择。

如果制作了一个部分，然后清除，然后选择了"其他"，则当前有效。如果用户需要，我需要在第一次点击时启动并显示另一个框。

HTML--

<form class="form-horizontal" [formGroup]="unableToScanForm" *ngIf="!loading" (ngSubmit)="onSubmit()">
<div class="container">
<div class="card-body">
<div class="form-group row">
<label class="col-md-4 col-form-label" for="reasonType"><strong>Reason*</strong></label>
<div class="col-md-12">
<ng-select id="reasonType" name="reasonType"
placeholder="Select a reason..."
labelForId="reasonType"
formControlName="reasonType"
[multiple]="false"
[hideSelected]="true"
[closeOnSelect]="true"
[items]="reasonType"
[searchable]="false"
bindLabel="type"
bindValue="type"
[ngClass]="{ 'is-invalid': submitted && f.reasonType.errors }">
</ng-select>
<div *ngIf="submitted && f.reasonType.errors" class="invalid-feedback">
Please select a reason.
</div>
</div>
</div>
<div class="form-group row" *ngIf="showAdditionalInfo">
<label class="col-md-4 col-form-label" for="reasonDescription"><strong>Additional Information*</strong></label>
<div class="col-md-12">
<textarea
rows="3"
class="form-control"
id="reasonDescription"
formControlName="reasonDescription"
[ngClass]="{ 'is-invalid': submitted && f.reasonDescription.errors }">
</textarea>
<div *ngIf="submitted && f.reasonDescription.errors" class="invalid-feedback">
Please detail a description of the reason.
</div>
</div>
</div>
</div>
</div>
</form>

TS--

reasonSelection(): void {
this.unableToScanForm.valueChanges.subscribe(value => {
if (value.reasonType === 'Other') {
this.showAdditionalInfo = true;
}
});
}

Answer 1

假设您必须使用第一个表单值开始侦听更改：

reasonSelection(): void {
this.unableToScanForm.valueChanges
.pipe(startWith(this.unableToScanForm.value))
.subscribe(...);
}