Question

我正在尝试实现一个反应式表单，该表单仅在单击“提交”按钮时才提交，而不是在用户在Enter中点击Input时提交，但是我得到了TypeError: "_co.form.submit is not a function"并且看到了许多类似的问题，例如submit is not a function和can't programmatically submit form，但是没有一个解决方案有效（例如确保按钮未命名为“ submit”）。我什至制作了一个可以正常运行的小型测试应用程序（代码显示在底部），所以我很困惑为什么我的原始应用程序出现问题。有效和无效代码之间的明显区别是，在有效代码中，我有#form模板引用变量，但由于存在#form原因，我在代码中指出了问题甚至还有更多问题，例如TypeError: "this.form.get is not a function"和表单都不会在元素中带有#form的情况下呈现，而没有它，至少表单即使不会提交也会呈现。

以下是有问题的代码摘录：

details.component.html

<form class="member-wrapper" [formGroup]="form" method="POST" action="http://localhost:3000/users/{{route}}/details">
  <div class="member-header">
    <h3 class="member-title">{{(updating) ? 'Please update your details' : 'Share a bit about yourself'}}</h3>
    <h4 class="member-description">Description</h4>
  </div>
  <div class="member-body">
    . . . 
    . . . 
  </div>
  <button type="button" (click)="form.submit()">Submit</button>
</form>

details.component.ts

import { Component, OnInit, AfterViewInit, ViewChildren, ElementRef, QueryList } from '@angular/core';
import { FormGroup, FormControl } from '@angular/forms';
import { TagDirective} from '../tag.directive';
. . . 
. . . 

export class DetailsComponent implements OnInit, AfterViewInit  {
  @ViewChildren(TagDirective) ipt!: QueryList<ElementRef>;
  form: FormGroup = new FormGroup({});
  got_data: boolean = false; 
  first_pass: boolean = true; updating: boolean = false; 
  data: Object;
  meta: Object;
  data_string: string;
  datArr: any[] = [];
  formCtls: any = {};

. . . 
. . .

app.module.ts

import { NgModule, OnInit } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
. . . 
. . . 


import { AppComponent } from './app.component';

@NgModule({
  imports: [
    BrowserModule,
    HttpClientModule,
    FormsModule,
    ReactiveFormsModule,
. . . 
. . . 
  ],
    declarations: [
    AppComponent,
. . . 
. . . 
  ],

details.module.ts（详细信息组件的功能模块）

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { TagDirective } from '../tag.directive';

import { DetailsRoutingModule } from './details-routing.module';
import { DetailsComponent } from './details.component';

@NgModule({
  declarations: [DetailsComponent, TagDirective],
  imports: [
    CommonModule,
    DetailsRoutingModule,
    FormsModule,
    ReactiveFormsModule
  ]
})
export class DetailsModule { }

这是可以正常工作的小型测试代码：

test.component.html

<form #form [formGroup]="form" METHOD="GET" action="http://localhost:3000/test">
  <input placeholder="Enter" formControlName="input1"/>
  <input placeholder="The Dragon" formControlName="input2"/>
  <button type="button" (click)="form.submit()">Submit</button>
</form>

test.component.ts

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

@Component({
  selector: 'app-test',
  templateUrl: './test.component.html',
  styleUrls: ['./test.component.scss']
})
export class TestComponent implements OnInit {
  form: FormGroup = new FormGroup({});
  constructor() { }

  ngOnInit() {
  }

}

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { TestComponent } from './test/test.component';

@NgModule({
  declarations: [
    AppComponent,
    TestComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    FormsModule,
    ReactiveFormsModule

  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

非常感谢，如果有任何想法为什么我会收到此错误！

Answer 1

这行代码是错误的

  <button type="button" (click)="form.submit()">Submit</button>

这是您可以使用(ngSubmit)="onSubmit()"

使用反应形式提交的方式

示例

<form (ngSubmit)="onSubmit()" [formGroup]="loginForm">
    <div class="form-group">
      <label for="UserName">Your email</label>
      <input
        type="text"
        class="form-control"
        id="UserName"
        name="UserName"
        required
        formControlName="UserName"
      />
      <div
        *ngIf="UserName.invalid && (UserName.dirty || UserName.touched)"
        class="alert alert-danger"
      >
        <div *ngIf="UserName.errors.required">
          Email is required
        </div>

        <div *ngIf="UserName.errors.whitespace">
          whitespace is required
        </div>
      </div>
    </div>

    <div class="form-group">
      <label for="password">Your password</label>
      <input
        type="password"
        ngModel
        class="form-control"
        id="Password"
        name="Password"
        required
        formControlName="Password"
      />
      <div
        *ngIf="Password.invalid && (Password.dirty || Password.touched)"
        class="alert alert-danger"
      >
        <div *ngIf="Password.errors.required">
          Password is required
        </div>
      </div>
    </div>

    <button type="submit" class="btn btn-success" [disabled]="!loginForm.valid">
      Submit
    </button>
  </form>

为什么会出现错误：TypeError：“ _ co.form.submit不是函数”？

1 个答案: