Сброс угловой формы с моделью - PullRequest
Новая
       23

Сброс угловой формы с моделью

0 голосов
/ 26 сентября 2019

Я хочу иметь возможность сбросить угловую форму с некоторыми значениями по умолчанию для ее модели 

<form>
  <input type="text" name="text" [(ngModel)]="model.text">
  <button type="reset" (click)="resetModel()">Reset</button>
</form>

и в компоненте 

model = { text: 'Test' };

resetModel() {
  this.model = { text: 'Test' };
}

Это не работает как сброспроисходит после того, как модель установлена ​​и текст сбрасывается до нуля.

Единственное, что я могу выяснить, - это использовать тайм-аут, как мы использовали для загрязнения наших приложений AngularJ с помощью 

resetModel() {
  setTimeout(() => { this.model = { text: 'Test' }; });
}

https://stackblitz.com/edit/angular-5pdpml

или сделайте кнопку простой старой кнопкой вместо кнопки сброса и передайте форму в метод сброса и вызовите markAsUntouched и markAsPristine.

Я неМне действительно нравится любой из этих параметров.

Я попытался присвоить входному значению значение, чтобы сброс имел значение по умолчанию, но Angular по-прежнему устанавливает нулевую модель, даже если на входе есть текст, установленный сбросом.

Есть ли способ для кнопки сброса установить состояние формы по умолчанию вместо того, чтобы устанавливать все привязки на ноль?

Ответы [ 2 ]

1 голос
/ 26 сентября 2019

Есть способ без использования setTimeout.Вы можете получить ссылку на форму и вызвать методы reset или resetForm (в этом случае оба будут работать) для сброса значения (и состояния). 

<form #myForm="ngForm">
  <input type="text" name="text" [(ngModel)]="model.text">
  <button type="button" (click)="myForm.reset({ text: 'Test' })">Reset</button>
  <!-- <button type="button" (click)="myForm.resetForm({ text: 'Test' })">Reset</button> -->
</form>
{{ model | json }}

Вот обновленное stackblitz .

Вы должны заметить, что кнопка имеет тип reset, но обычный button, по некоторым причинам тип reset не работает.Я исследую немного больше и надеюсь найти причину, по которой ...

РЕДАКТИРОВАТЬ : Очевидно, что при использовании кнопки type=reset она автоматически сбрасывает значения формы до значений по умолчанию (в случае, еслиэлемента управления input, который будет значением, определенным в атрибуте value).Это кажется неправильным в контексте угловой формы и не должно использоваться (немного об этом здесь ).

Более того, даже не рекомендуется использовать кнопки reset в формах (согласно официальная документация ) поэтому я вполне уверен, что в этом случае правильно использовать type=button.

Обычно вам следует избегать включения кнопок сброса в ваши формы.Они редко бывают полезны, и вместо этого они чаще расстраивают пользователей, которые щелкают их по ошибке (часто при попытке нажать кнопку отправки).

Наконец, я упомяну разницу между resetи resetForm.Они одинаковы, за исключением того, что resetForm также влияет на состояние submitted формы (устанавливает значение false).Подробнее об этом здесь .

0 голосов
/ 26 сентября 2019

Вы можете создать новый класс для вашей модели: 

export class Model{
text: string;
}

, а затем назначить вашу модель новому экземпляру класса 

model = new Model();

, затем в вашей форме подключиться к этомуобъект модели 

<form>
  <input type="text" name="text" [(ngModel)]="model.text">
  <button type="reset" (click)="resetModel()">Reset</button>
</form>

для сброса его в контроллере установите для объекта модели новый экземпляр 

resetForm(){
model = new Model();
}
...