Angular Form Control Update visually doesn't match Form Object

In this form, our objects have Sources and Sub-Sources, with each Source having its own specific list of Sub-Sources. For some reason, if you select a Source and then switch to another Source, the select item will visually display the first item in the list of sub-sources as being selected. It is not selected in the FormControl object, and our form will not let you submit the form without actually selecting an option from the list(you cannot click on the already-selected subsource). I want the subsource select to just be blank/empty when you switch the source selection.

The select visually picks the first item from the list

But the formcontrol object does not have any value currently

Here is the TS code:

onSourceSelected(target: any) {
  var current = this.alertSources.find(it => it.id == target)

  if (!current) {
    console.error(`Found no alert source for ID: ${target}.`);
    return;
  }

  this.subSourcesForAlertSource = this.getSubSourcesForSource(current.id, this.alertSources);

  if (this.subSourcesForAlertSource.length === 0) {
    this.subSource.clearValidators();
    this.subSource.patchValue(<string>null);
    this.subSource.markAsDirty();
  }
  else {
    this.subSource.setValidators(Validators.required);
  }

  this.subSource.updateValueAndValidity();
  console.log(this.subSource);
}

And the HTML:

<div class="sm:col-span-3">
  <label for="source" class="block text-sm pt-3 font-medium text-gray-700">
    Source
  </label>
  <div class="mt-1">
    <select id="source" name="source" formControlName="source" 
            class="shadow-sm focus:ring-indigo-500 focus:border-indigo-500 block w-full sm:text-sm border-gray-300 rounded-md"
            (change)="onSourceSelected($event.target.value)">
      <option *ngFor="let source of alertSources" value="{{source.id}}">{{source.name}}</option>
    </select>
  </div>
</div>

<div class="sm:col-span-3" *ngIf="subSourcesForAlertSource.length > 0">
  <label for="subsource" class="block text-sm pt-3 font-medium text-gray-700">
    Sub-source
  </label>
  <div class="mt-1">
    <select id="subsource" name="subsource" formControlName="subsource"
            class="shadow-sm focus:ring-indigo-500 focus:border-indigo-500 block w-full sm:text-sm border-gray-300 rounded-md">
      <ng-container *ngFor="let subSource of subSourcesForAlertSource">
        <option *ngIf="!subSource.isDisabled || subSource.id === alert?.subSource?.id"
                [disabled]="subSource.isDisabled"
                [hidden]="subSource.isDisabled"
                value="{{subSource.id}}">
          {{subSource.isDisabled ? subSource.name + " [DISABLED]" : subSource.name}}
        </option>
      </ng-container>
    </select>
    <div *ngIf="subSource.invalid && (subSource.dirty || subSource.touched || source.dirty || source.touched)"
         class="text-red-600 text-sm">
      Sub-source is required.
    </div>
  </div>
</div>

Tried resetting the FormControl object in various ways – .reset(), .setValue(null), and so on.

You need to sign in to view this answers

Related Post