ngSubmit не выполняется в Angular Реактивной форме - PullRequest
Новая
       14

ngSubmit не выполняется в Angular Реактивной форме

0 голосов
/ 14 февраля 2020

Я новичок в angular, и возился с реактивными формами, наблюдая за учебником. Моя функция ngSubmit () не выполняется, и ничего не происходит, когда я нажимаю кнопку отправки и провожу час, пытаясь найти причину root. Может кто-нибудь помочь?

Employee.ts 

export class Employee {

  private name: string;
  private email: string;
  private salary: number;
  private notes?: string;

}

App.component. html

  <div class="container-fluid">
  <app-header></app-header>
</div>

<div class="row justify-content-lg-center">
  <div class="col-md-4">
    <app-employee-list></app-employee-list>
  </div>

  <div class="col-md-4">
    <app-employee-form></app-employee-form>
  </div>
</div>

Employee-component. html

<form [formGroup]="reactiveForm" (submit)="employeeSubmit(this.reactiveForm.value)">
  <div class="input-group mb-3">
    <div class="input-group-prepend">
      <span class="input-group-text" id="basic-addon1">@</span>
    </div>
    <input formControlName="name" type="text" class="form-control" placeholder="Username" aria-label="Username"
           aria-describedby="basic-addon1">
  </div>

  <div class="input-group mb-3">
    <input formControlName="email" type="text" class="form-control" placeholder="Recipient's username" aria-label="Recipient's username"
           aria-describedby="basic-addon2">
    <div class="input-group-append">
      <span class="input-group-text" id="basic-addon2">@example.com</span>
    </div>
  </div>


  <div class="input-group mb-3">
    <div class="input-group-prepend">
      <span class="input-group-text">$</span>
    </div>
    <input formControlName="salary" type="text" class="form-control" aria-label="Amount (to the nearest dollar)">
    <div class="input-group-append">
      <span class="input-group-text">.00</span>
    </div>
  </div>

  <div class="input-group">
    <div class="input-group-prepend">
      <span class="input-group-text">With textarea</span>
    </div>
    <textarea formControlName="notes" class="form-control" aria-label="With textarea"></textarea>
  </div>

  <div class="input-group">
  <button type="button" class="btn btn-primary">Submit</button>
  </div>

</form>

Employee-form-component.ts 

import { Component, OnInit } from '@angular/core';
import {FormBuilder, FormGroup} from '@angular/forms';

@Component({
  selector: 'app-employee-form',
  templateUrl: './employee-form.component.html',
  styleUrls: ['./employee-form.component.css']
})
export class EmployeeFormComponent implements OnInit {

  reactiveForm: FormGroup;

  constructor(private formBuilder: FormBuilder) {
    this.reactiveForm = this.formBuilder.group({
      'name': [''],
      'email': [''],
      'salary': [''],
      'notes': ['']
    });
  }

  ngOnInit() {
  }

  employeeSubmit(value) {
    // tslint:disable-next-line:no-debugger
    debugger;
    console.log(this.reactiveForm.value);
  }

}

1 Ответ

1 голос
/ 14 февраля 2020

Ваша кнопка должна быть типа submit, а не типа button

<button type="submit">Submit</button>

Установка типа на button - это указанная c инструкция, которую кнопка не должна отправить форму. Это полезно, когда в форме есть другие кнопки, которые не являются основной кнопкой отправки.

...