时间戳

首页 > 解决方案 > AngularJS 6 中的表单

angular - AngularJS 6 中的表单

问题描述

我在提交不租用的表单时遇到问题，我已经将 FormsModule 放入 app.module.ts

这是一个组件和一个简单的 HTML 表单：。 

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

@Component({
  selector: 'app-products',
  templateUrl: './products.component.html',
  styleUrls: ['./products.component.css']
})
export class ProductsComponent implements OnInit {
  productName = 'A book';
  products = ['A book', 'A tree'];
  isDisabled = true;

  constructor() {
    setTimeout(() => {
      this.isDisabled = false;
    }, 3000);
  }

  onAddProduct(form) {
    // this.products.push(this.productName);
    console.log(form);
  }

  ngOnInit() {
  }

}
<h1>My products</h1>
<form (ngSubmit)="onAddProduct(f)" #f="ngForm" novalidate>
  <input type="text" ngModel name="productName" required>
  <button type="submit">Change Text</button>
</form>
<div *ngFor="let product of products">{{ product }}</div>

这是我已经放入 FormsModule 的模块 

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import {FormsModule} from '@angular/forms';
import { AppComponent } from './app.component';
import { ProductComponent } from './product/product.component';
import { ProductsComponent } from './products/products.component';

@NgModule({
  declarations: [
    AppComponent,
    ProductComponent,
    ProductsComponent
  ],
  imports: [
    BrowserModule,
    FormsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

When I click the button that happens nothing.

标签： angularforms

解决方案

上面的问题是你需要传递表格 f 而不是 t

将其更改为，

<form (ngSubmit)="onAddProduct(f)" #f="ngForm" novalidate>

你可以在方法内部访问，

  onAddProduct(form) {
    if (form.valid) {
    console.log(form.value.productName);
    }
  }

堆栈闪电战演示

推荐阅读