Javascript 为什么我会出现错误：TypeError:"_co.form.submit不是一个函数；？

我正在尝试实现一个被动表单，它只在单击提交按钮时提交，而不是在用户在

输入中点击
输入
时提交，但是我得到
类型错误：“\u co.Form.submit不是一个函数”
，并且看到了许多类似的问题，例如和，但没有一个解决方案有效（比如确保按钮没有命名为“提交”）。我甚至做了一个小的测试应用程序（代码显示在底部）这很好，所以我很困惑为什么我的原始应用程序有问题。有效和无效代码之间的明显区别是，在有效代码中，我有
#form
模板引用变量，但我在有问题的代码中去掉了它，因为包含
#form
会导致更多问题例如
TypeError:“this.form.get不是函数”
，表单甚至不会在元素中使用
#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>



<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>

app.module.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 = {};

. . . 
. . . 



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,
. . . 
. . . 
  ],

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() {
  }

}


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 { }


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

下面是运行良好的小测试代码：

test.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>



<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>

app.module.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 = {};

. . . 
. . . 



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,
. . . 
. . . 
  ],

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() {
  }

}


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 { }


如果您知道我为什么会出现此错误，请提前多谢！
这里的这行代码是错误的

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

尝试为模板引用变量使用不同的名称，而不是
form
，因为在同一范围内有两个名称相同的对象
form
，因此存在一些歧义，因为
FormGroup
没有提交函数-可能您使用了错误的角度对象我尝试为模板使用不同的名称te引用变量，但这并没有解决它。而且，在我运行的小测试代码中，模板引用变量和FormGroup具有相同的名称，并且代码仍然可以运行。我真的很困惑！有进一步的想法吗？非常感谢，非常感谢。我编辑了我的问题，以明确我正在尝试让表单仅在按钮上提交n单击，当用户在其中一个
输入
元素中点击
输入
时，不会提交。此外，即使在您的答案中进行了更改，我仍然会收到
类型错误：“\u co.onSubmit不是一个函数”
。我的声明或导入肯定有问题，但我不知道是什么问题。更让我困惑的是，我包含的小样本代码工作正常。有什么想法吗？谢谢！我很高兴与大家分享代码。我对GitHub还比较陌生，我的脑袋有点发晕，试图弄清楚如何在没有lett的情况下公开代码让其他人更改我的原始代码。（这样任何人都可以分叉我的代码，但不能编辑原始代码）。这是默认行为，还是我需要做些什么来启用它？另外，似乎@Teedeez毕竟是对的，因为我通过将
#form
更改为
#myform
和
form.submit（）
更改为
myform.submit（）解决了这个问题
。我不知道为什么我的简单测试代码以前使用
#表单
。我猜测它一定有无声错误，但仍然能够提交，而我更详细的代码在这些错误上失败了。