Держите заполнитель поля select на form.reset () в угловых 6

Question

Эта ссылка помогла мне использовать заполнитель в поле выбора. Итак, мой код

<form (ngSubmit)="onSubmit(form)" #form="ngForm" class="form-sample form-position">

<div class="form-group row">
  <label class="col-sm-3 col-form-label">Membership</label>
  <div class="col-sm-9">
    <select name="membership" [(ngModel)]="membership" class="form-control" required>
      <option [ngValue]="undefined" disabled selected hidden> Please select one option </option>

      <option>Free</option>
      <option>Professional</option>
    </select>
  </div>
</div>

 <div class="form-group row">
      <label class="col-sm-3 col-form-label">State</label>
      <div class="col-sm-9">
        <select [(ngModel)]="state" class="form-control" name="state" required=""
          placeholder="Select">
          <option [ngValue]="undefined" disabled selected hidden> Please select one option </option>
          <option *ngFor="let item of statesList">{{item}}</option>
        </select>
      </div>
    </div>

  <div class="text-center container-fluid form-group">
     <button [disabled]="!form.valid" type="submit" class="btn btn-primary btn-fw text-center">Submit</button>
     <button type="button" class="btn btn-secondary btn-fw" (click)="form.reset()">Clear</button>
  </div>
</form>

Это небольшая часть моего кода. Приведенный выше код работает отлично. Когда страница загружается для поля выбора Membership выбирается опция по умолчанию Please select one option.

Но проблема в том, что когда я сбрасываю форму, текст Please select one option также очищается. Но я хочу, чтобы эта опция по умолчанию оставалась выбранной после сброса формы. для сброса формы я использую form.reset().

Answer 1

form.reset() устанавливает значения null для базовых моделей. поскольку вы присваиваете undefined в качестве значения параметров по умолчанию, они не совпадают. либо предоставьте пользовательскую логику для очистки формы и установите значения модели на undefined при сбросе;

<button type="button" class="btn btn-secondary btn-fw" (click)="clearForm()">Clear</button>

и в ваших component.ts

clearForm() {
  this.membership = undefined;
  this.state = undefined;
}

OR

изменить значения параметров и начальные значения соответствующих моделей на null

<option [ngValue]="null" disabled selected hidden> Please select one option </option>

и в ваших component.ts

membership = null;
state = null;

вот демоверсия для второго https://stackblitz.com/edit/angular-ngvh9p

Answer 2

Если вы изменили значение в выборе, вам нужно установить значение membership на undefined при сбросе формы.Я не знаю, что делает form.reset(), но может установить значение null.