onChange function only working on second click

Issue

I have a form that I need the additional description input to show when 'other' is selected from the dropdown, however with the current function this only works on the second selection.

It currently works if a section is made, then cleared and then 'Other' is selected. I need this to fire and display the other box on the first click if required by the user.

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;
      }
    });
  }

Solution

Suppose you have to start listen changes with the first form value:

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

Answered By - Anton Marinenko