Как reset проверка формы при отправке формы в ANGULAR 2

Ответ 1

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

См. также

• https://github.com/angular/angular/issues/6196
• https://github.com/angular/angular/issues/4933
• https://github.com/angular/angular/issues/5568
• https://github.com/angular/angular/issues/4914

Ответ 2

Здесь, как он работает в настоящее время с Angular 4.1.0 - 5.1.3:

class YourComponent {
    @ViewChild("yourForm")
    yourForm: NgForm;


    onSubmit(): void {
        doYourThing();

        // yourForm.reset(), yourForm.resetForm() don't work, but this does:
        this.yourForm.form.markAsPristine();
        this.yourForm.form.markAsUntouched();
        this.yourForm.form.updateValueAndValidity();
    }
}

Ответ 3

from.resetForm()

Я пробовал почти все, и единственное, что я обнаружил, что на самом деле сбрасывает form.submitted в false, это следующее:

В шаблоне отправьте форму в функцию отправки:

<form name="form" class="form-horizontal" (ngSubmit)="f.form.valid && submit(f)" #f="ngForm" novalidate>

В файле component.ts укажите следующее:

// import NgForm
import { NgForm } from '@angular/forms';

// get the passed in variable from the html file
submit(myForm: NgForm): void {

    console.log(myForm.form.status, myForm.form.dirty, myForm.form.pristine, myForm.form.untouched, myForm.submitted, myForm.dirty, myForm.pristine, myForm.untouched);

    // This is the key!
    myForm.resetForm();

    console.log(myForm.form.status, myForm.form.dirty, myForm.form.pristine, myForm.form.untouched, myForm.submitted, myForm.dirty, myForm.pristine, myForm.untouched);


}

Значения console.log выводят следующее: обратите внимание, что он сбрасывает все значения.

VALID true false false true true false false

INVALID false true true false false true true

Ответ 4

Я делаю это в RC.5, я определяю элементы формы в шаблоне.

<form (ngSubmit)="submit(); form.reset()" #form="ngForm">

Передача формы для отправки или просмотра ее с помощью ViewChild вообще не работала, для меня это достаточно хорошо.

Ответ 5

В более современных версиях (Angular 2.4.8 в моем случае) легко:

Помечает элемент управления как престольный и, следовательно, снова действителен.

private resetFormControlValidation(control: AbstractControl) {
    control.markAsPristine();
    control.markAsUntouched();
    control.updateValueAndValidity();
}

Ответ 6

Основываясь на ответе Бенни Боттемы, я смог сбросить форму, включая проверки, используя resetForm() в Angular 6.

class YourComponent {

   @ViewChild("yourForm")
   yourForm: NgForm;

    onSubmit(): void {
     doYourThing();
     this.yourForm.resetForm();
    }
}

Ответ 7

Это работало для меня в Angular 5 с использованием шаблонных форм (это не будет работать для реактивных форм)

<form #myForm = "ngForm" (submit)="callMyAPI(); myForm.resetForm()">

Это сбрасывает как значения формы, так и проверки.

Ответ 8

Я ценю все ответы здесь. Они указали мне в правильном направлении.

Угловой 6 с угловым материалом

<form #myForm="ngForm" [formGroup]="formGroup" (ngSubmit)="submit()">

затем

@ViewChild('myForm') myForm: NgForm;
formGroup = new FormGroup({...});
submit() {
  if (this.formGroup.pristine ||
  this.formGroup.untouched ||
  !this.formGroup.valid
) {
    return;
  }

  .... do with form data

  this.formGroup.reset();
  this.myForm.resetForm();
}

Ответ 9

если вы используете управляемые моделью формы i.e ngFormModel, определение контрольной группы еще раз после отправки разрешит это. Обратите внимание на ссылку

Ответ 10

Недавно я рассмотрел это, так как в настоящее время (май 2016 года) ничего еще не создано для Angular2 для этого.

Учитывая, что пользователь не может ввести "undefined" или "null", а проверка в основном используется для отображения ошибок формы для пользователя, а затем reset значения управления для Null

myControl.updateValue(null);

Вам нужно будет добавить это условие, решив отображать ошибки управления в пользовательском интерфейсе, просто добавив

if (myControl.value !== undefined && myControl.value !== null) {
   //then there is reason to display an error
}

(эта проверка, потому что Validators.Required обрабатывает пустое содержимое как действительное)

Надеюсь, что это поможет.

Ответ 11

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

> = 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();
  }
}

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

Ответ 12

Если вы используете Angular Material и используете <mat-error>, единственный способ, которым он работал для меня, это следующее. Вы должны использовать FormGroupDirective.

@ViewChild(FormGroupDirective) formDirective: FormGroupDirective;

submitBtnClick() {
  this.formDirective.resetForm();
}