Сброс формы в Angular 2 после отправки

> = RC.6

Поддержка сброса форм и поддержка submitted состояния.

 console.log(this.form.submitted); 

 this.form.reset() 

или

 this.form = new FormGroup()...; 

Обновить

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

 
 { this.reset() this.showForm = true; }); } 

Пример Plunker

original <= RC.5 Просто переместите код, который создает форму, в метод и вызовите его снова после обработки submit:

 @Component({ selector: 'form-component', template: ` 
    submit 
 
name: {{name.value}}
 
email: {{email.value}}
 
username: {{username.value}}
 ` }) class FormComponent { name:Control; username:Control; email:Control; form:ControlGroup; constructor(private builder:FormBuilder) { this.createForm(); } createForm() { this.name = new Control('', Validators.required); this.email = new Control('', Validators.required); this.username = new Control('', Validators.required); this.form = this.builder.group({ name: this.name, email: this.email, username: this.username }); } onSubmit(value:any):void { // code that happens when form is submitted // then reset the form this.reset(); } reset() { this.createForm(); } } 

Пример Plunker

Для Angular 2 Final у нас теперь есть новый API, который полностью сбрасывает форму:

 @Component({...}) class App { form: FormGroup; ... reset() { this.form.reset(); } } 

Этот API не только сбрасывает значения формы, но также устанавливает состояния полей формы обратно в ng-pristine и ng-untouched .

Используйте NgForm .resetForm() но не .reset() потому что это метод, который официально задокументирован в публичном api NgForm . (Ref [ 1 ])

Метод .resetForm() сбрасывает NgForm FormGroup и устанавливает флаг submit в false (см. [ 2 ]).

Протестировано в @angular версиях 2.4.8 и 4.0.0-rc3

Когда я проходил руководство Angular basics по формам и попадал на сброс формы, я был очень удивлен, когда прочитал следующее в отношении решения, которое они дают.

Это временное обходное решение, пока мы ждем надлежащей функции сброса формы.

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

Согласно API FormGroup (который отмечен как стабильный), уже существует метод «сброса».

Я попробовал следующее. В моем файле template.html у меня был

 
 ...  

Обратите внимание, что в элементе формы я инициализировал ссылочную переменную шаблона ‘registrationForm’ и инициализировал ее в директиве ngForm , которая «управляет формой в целом». Это дало мне доступ к методам и атрибутам управляющей группы FormGroup, включая метод reset ().

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

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

В файле template.html:

 
 ...  

И в моем файле component.ts:

 @Component({ ... }) export class RegistrationComponent { register(form: FormGroup) { ... // Somewhere within the asynchronous call resolve function form.reset(); } } 

Передача ссылки ‘registrationForm’ на метод позволит нам вызвать метод сброса в момент выполнения, который мы хотим.

Надеюсь, это поможет вам в любом случае. 🙂

Примечание . Этот подход основан на Angular 2.0.0-rc.5

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

 
  Add hero 

Кажется, нужно сделать трюк и снова направить поля формы на «нетронутую».

Если вы вызываете только функцию reset() , элементы управления формами не будут установлены в исходное состояние. У android.io docs есть решение этой проблемы.

component.ts

  active = true; resetForm() { this.form.reset(); this.active = false; setTimeout(() => this.active = true, 0); } 

component.html

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

  this.profileEditForm.reset(this.profileEditForm.value); 

см. сброс флагов формы в документе «Основы»

Я использовал в подобном случае ответ от Гюнтера Цохбауэра, и это было идеально для меня, переместив создание формы в функцию и вызвав ее из ngOnInit ().

Для иллюстрации, вот как я это сделал, включая инициализацию полей:

 ngOnInit() { // initializing the form model here this.createForm(); } createForm() { let EMAIL_REGEXP = /^[^@]+@([^@\.]+\.)+[^@\.]+$/i; // here just to add something more, useful too this.userForm = new FormGroup({ name: new FormControl('', [Validators.required, Validators.minLength(3)]), city: new FormControl(''), email: new FormControl(null, Validators.pattern(EMAIL_REGEXP)) }); this.initializeFormValues(); } initializeFormValues() { const people = { name: '', city: 'Rio de Janeiro', // Only for demonstration email: '' }; (this.userForm).setValue(people, { onlySelf: true }); } resetForm() { this.createForm(); this.submitted = false; } 

Я добавил кнопку в форму для интеллектуального сброса (с инициализацией полей):

В HTML-файле (или встроенном шаблоне):

 Reset 

После загрузки формы в первый раз или после нажатия кнопки сброса у нас есть следующий статус:

 FORM pristine: true FORM valid: false (because I have required a field) FORM submitted: false Name pristine: true City pristine: true Email pristine: true 

И все инициализации поля, которые простой form.reset () не делает для нас! 🙂

Пожалуйста, используйте следующий формат, он отлично работает для меня .. я проверил много способов, но это работает отлично.

если кто-то хочет очистить только определенный контроль формы, можно использовать

 formSubmit(){ this.formName.patchValue({ formControlName:'' //or if one wants to change formControl to a different value on submit formControlName:'form value after submission' }); }