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

Ответ 1

> = RC.6

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

console.log(this.form.submitted);

this.form.reset()

или же

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

обновление importat

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

В части представления формы (html) добавьте *ngIf чтобы показать или скрыть форму

<form *ngIf="showForm"

На стороне компонента формы (*.ts) сделайте это

  showForm:boolean = true;

  onSubmit(value:any):void {
    this.showForm = false;
    setTimeout(() => {
    this.reset()
      this.showForm = true;
    });
  }

Вот более подробный пример:

export class CreateParkingComponent implements OnInit {
  createParkingForm: FormGroup ;
  showForm = true ;

  constructor(
    private formBuilder: FormBuilder,
    private parkingService: ParkingService,
    private snackBar: MatSnackBar) {

      this.prepareForm() ;
  }

  prepareForm() {
    this.createParkingForm = this.formBuilder.group({
      'name': ['', Validators.compose([Validators.required, Validators.minLength(5)])],
      'company': ['', Validators.minLength(5)],
      'city': ['', Validators.required],
      'address': ['', Validators.compose([Validators.required, Validators.minLength(10)])],
      'latitude': [''],
      'longitude': [''],
      'phone': ['', Validators.compose([Validators.required, Validators.minLength(7)])],
      'pictureUrl': [''],
      // process the 3 input values of the maxCapacity'
      'pricingText': ['', Validators.compose([Validators.required, Validators.minLength(10)])],
      'ceilingType': ['', Validators.required],
    });
  }

  ngOnInit() {
  }


  resetForm(form: FormGroup) {
    this.prepareForm();
  }

  createParkingSubmit() {
    // Hide the form while the submit is done
    this.showForm = false ;

    // In this case call the backend and react to the success or fail answer

    this.parkingService.create(p).subscribe(
      response => {
        console.log(response);
        this.snackBar.open('Parqueadero creado', 'X', {duration: 3000});
        setTimeout(() => {
          //reset the form and show it again
          this.prepareForm();
            this.showForm = true;
          });
      }
      , error => {
        console.log(error);
        this.showForm = true ;
        this.snackBar.open('ERROR: al crear Parqueadero:' + error.message);
      }
      );
  }
}

Пример плунжера

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

@Component({
  selector: 'form-component',
  template: '
    <form (ngSubmit)="onSubmit($event)" [ngFormModel]="form">
       <input type="test" ngControl="name">
       <input type="test" ngControl="email">
       <input type="test" ngControl="username">
       <button type="submit">submit</button>
    </form>
    <div>name: {{name.value}}</div>
    <div>email: {{email.value}}</div>
    <div>username: {{username.value}}</div>
'
})
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();
  }
}

Пример плунжера

Ответ 2

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

<form (ngSubmit)="mySubmitHandler(); myNgForm.resetForm()" #myNgForm="ngForm">

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

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

Ответ 3

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

@Component({...})
class App {

    form: FormGroup;
     ...
    reset() {
       this.form.reset();
   }
}

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

Ответ 4

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

Это временное обходное решение, пока мы ждем подходящей формы reset.

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

В соответствии с API FormGroup (который отмечен как стабильный) уже существует метод reset.

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

<form (ngSubmit)="register(); registrationForm.reset();" #registrationForm="ngForm">
    ...
</form>

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

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

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

В моем файле template.html:

<form (ngSubmit)="register(registrationForm);" #registrationForm="ngForm">
    ...
</form>

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

@Component({
  ...
})
export class RegistrationComponent {
  register(form: FormGroup) {

   ...

   // Somewhere within the asynchronous call resolve function
   form.reset();
  }
}

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

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

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

Ответ 5

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

component.ts

  active = true; 

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

component.html

<form *ngIf="active">

Ответ 6

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

<form #heroForm="ngForm" (ngSubmit)="add(newHero); heroForm.reset()">
<!-- place your input stuff here -->
<button type="submit" class="btn btn-default" [disabled]="!heroForm.valid">Add hero</button>

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

Ответ 7

В подобном случае я использовал ответ от Günter Zöchbauer, и это было идеально для меня, переместив создание формы в функцию и вызвав ее из ngOnInit().

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

ngOnInit() {
    // initializing the form model here
    this.createForm();
}

createForm() {
    let EMAIL_REGEXP = /^[^@][email protected]([^@\.]+\.)+[^@\.]+$/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: ''
    };
    (<FormGroup>this.userForm).setValue(people, { onlySelf: true });
}

resetForm() {
    this.createForm();
    this.submitted = false;
}

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

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

<button type="button" [disabled]="userForm.pristine" (click)="resetForm()">Reset</button>

После загрузки формы в первый раз или после нажатия кнопки 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() не делает для нас!: -)

Ответ 8

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

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

см. reset флаги формы в документе Основы

Ответ 9

Пожалуйста, используйте следующий формат, он отлично работает для меня. Я проверил много способов, но это работает отлично. <form (ngSubmit)="mySubmitHandler(); myNgForm.resetForm()" #myNgForm="ngForm">.... </form>

Ответ 10

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

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