import {Component} from '@angular/core';
import {NgForm} from '@angular/forms';
@Component({
    selector: 'example-app',
    template: '<form #f="ngForm" (ngSubmit)="onSubmit(f)" novalidate>
        <input name="first" ngModel required #first="ngModel">
        <input name="last" ngModel>
        <button>Submit</button>
    </form>
    <p>First name value: {{ first.value }}</p>
    <p>First name valid: {{ first.valid }}</p>
    <p>Form value: {{ f.value | json }}</p>
    <p>Form valid: {{ f.valid }}</p>',
})
export class SimpleFormComp {
    onSubmit(f: NgForm) {

        // some stuff

        f.resetForm();
    }
}

Позвоните clearForm(); в Вашей .ts Попытке файла

как ниже отрывка примера кода для очистки данных формы.

clearForm() {

this.addContactForm.reset({
      'first_name': '',
      'last_name': '',
      'mobile': '',
      'address': '',
      'city': '',
      'state': '',
      'country': '',
       'zip': ''
     });
}

К угловой версии 4 можно использовать это:

this.heroForm.reset();

, Но, Вам могло быть нужно начальное значение как:

ngOnChanges() {
 this.heroForm.reset({
  name: this.hero.name, //Or '' to empty initial value. 
  address: this.hero.addresses[0] || new Address()
 });
}

важно разрешить пустую проблему в Вашей ссылке на объект.

ссылка ссылка , Поиск "сброса флаги формы".

Существует новая дискуссия об этом ( https://github.com/angular/angular/issues/4933). До сих пор существует только некоторые взломы, который позволяет очищать форму, как воссоздание целой формы после представления: https://embed.plnkr.co/kMPjjJ1TWuYGVNlnQXrU /

Я нашел другое решение. Это - немного hacky, но его широко доступное в angular2 мире.

С тех пор *ngIf директива удаляет форму и воссоздает его, можно просто добавить *ngIf к форме и связать ее со своего рода formSuccessfullySent переменная. => Это воссоздаст форму и поэтому сбросит состояния элемента управления вводом.

, Конечно, необходимо очистить образцовые переменные также. Я нашел удобным иметь определенный образцовый класс для моих полей формы. Таким образом, я могу сбросить все поля, столь же простые как создание нового экземпляра этого образцового класса. :)

Вот то, как я делаю это в Угловом 7.3

// you can put this method in a module and reuse it as needed
resetForm(form: FormGroup) {

    form.reset();

    Object.keys(form.controls).forEach(key => {
      form.get(key).setErrors(null) ;
    });
}

не было никакой потребности звонить form.clearValidators()

Гм, теперь (23 января 2017 с угловыми 2.4.3) я заставил его работать как это:

newHero() {
    return this.model = new Hero(42, 'APPLIED VALUE', '');
}
<button type="button" class="btn btn-default" (click)="heroForm.resetForm(newHero())">New Hero</button>

Ниже кода работает на меня в Угловом 4

import { FormBuilder, FormGroup, Validators } from '@angular/forms';
export class RegisterComponent implements OnInit {
 registerForm: FormGroup; 

 constructor(private formBuilder: FormBuilder) { }   

 ngOnInit() {
    this.registerForm = this.formBuilder.group({
      empname: [''],
      empemail: ['']
    });
 }

 onRegister(){
    //sending data to server using http request
    this.registerForm.reset()
 }

}

Вот то, как я делаю это Угловые 8:

Получают локальную ссылку Вашей формы:

<form name="myForm" #myForm="ngForm"></form>

@ViewChild('myForm', {static: false}) myForm: NgForm;

И каждый раз, когда необходимо сбросить форму, звоните resetForm метод:

this.myForm.resetForm();

Вам будет нужно FormsModule от @angular/forms, чтобы он работал. Обязательно добавьте его к Вашему импорту модуля.

resetForm(){
    ObjectName = {};
}