Блог

Главная - Вопросы по программированию - Почему переданное свойство ngForm остается ложным после события отправки?

Почему переданное свойство ngForm остается ложным после события отправки?

#javascript #angular

#javascript #angular

Вопрос:

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

Но когда я отправляю форму, она запускает onSubmit функцию, но submitted остается false .

Почему? и как заставить это работать?

stackblitz

 import { Component, VERSION, ViewChild } from "@angular/core";
import { FormControl, FormGroup, NgForm } from "@angular/forms";

@Component({
  selector: "my-app",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"]
})
export class AppComponent {
  @ViewChild("ngForm") form: NgForm;

  profileForm = new FormGroup({
    firstName: new FormControl(""),
    lastName: new FormControl("")
  });

  name = "Angular "   VERSION.major;

  submitForm() {
    this.form.ngSubmit.emit();
  }

  onSubmit() {
    console.log("submittedd!!!");
  }
}

HTML:

 <hello name="{{ name }}"></hello>
<p>
    Start editing to see some magic happen :)
</p>

{{ngForm.submitted | json }}

<form #ngForm="ngForm" [formGroup]="profileForm" (ngSubmit)="onSubmit()">

    <label>
    First Name:
    <input type="text" formControlName="firstName">
  </label>

    <label>
    Last Name:
    <input type="text" formControlName="lastName">
  </label>

</form>

<button type="button" (click)="submitForm()">trigger submit outside</button>

Комментарии:

1. Насколько я знаю, отправка в ngSubmit фактически не отправляет форму. Я предлагаю переместить кнопку внутри формы, удалить привязку события щелчка и изменить тип на submit . Тогда вам не понадобится функция submitForm .

2. @testpossessed Это тоже верно.

Ответ №1:

Вы не так далеко. Потребуется несколько изменений:

Добавить id="ngForm" для тега формы:

 <form id="ngForm" #ngForm="ngForm" [formGroup]="profileForm" (ngSubmit)="onSubmit()">

Замените тип кнопки на submit и добавьте дополнительный атрибут form значением, которое было присвоено идентификатору формы. В этом случае это было бы ngForm :

 <button type="submit" form="ngForm">trigger submit outside</button>

Кроме того, вам больше не нужен submitForm метод.

Теперь он установит форму как отправленную.