离子角度表单生成器没有获得表单控制值答案

【问题标题】：ionic angular formbuilder not getting formcontrol value离子角度表单生成器没有获得表单控制值
【发布时间】：2021-04-10 06:00:32
【问题描述】：

我花了好几个小时弄清楚为什么，我无法获得任何表单值。控制台没有错误。在这一点上，我不知道接下来要检查什么！每次我点击注册时，即使表单具有价值。使用“this.myForm.value”时结果为空。

//app.module

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

import { IonicModule, IonicRouteStrategy } from '@ionic/angular';

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

@NgModule({
  declarations: [AppComponent],
  entryComponents: [],
  imports: [
    BrowserModule,
    IonicModule.forRoot(),
    AppRoutingModule,
    ReactiveFormsModule,
    FormsModule,
  ],
  providers: [{ provide: RouteReuseStrategy, useClass: IonicRouteStrategy }],
  bootstrap: [AppComponent],
})
export class AppModule {}

//login.html

<ion-header>
  <ion-toolbar color="primary">
    <ion-title>Log in</ion-title>
  </ion-toolbar>
</ion-header>
<form [formGroup]="myForm">
  <ion-item>
    <ion-label>username</ion-label>
    <ion-input type="text" formControlName="username"></ion-input>
  </ion-item>
  <ion-item>
    <ion-label>password</ion-label>
    <ion-input type="text" formControlName="password"></ion-input>
  </ion-item>
  <ion-button
  expand="block"
  (click)="onSignUp()"
  >Submit</ion-button> 
</form>

//login.component.html

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

@Component({
  selector: 'app-login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.scss'],
})
export class LoginComponent implements OnInit {
  public myForm: FormGroup;
  constructor(
    public formBuilder: FormBuilder
  ) { }

  ngOnInit() {
    this.myForm = this.formBuilder.group({
      username: [null, Validators.required],
      password: [null, Validators.required]
    }); 
    console.log(this.myForm.value);
    
  }

  onSignUp(): void {
    console.log(this.myForm.value);
  }

}

【问题讨论】：

标签： angular ionic-framework

【解决方案1】：

试试这个方法：

<ion-header>
  <ion-toolbar color="primary">
    <ion-title>Log in</ion-title>
  </ion-toolbar>
</ion-header>
<form [formGroup]="myForm" (ngSubmit)="onSignUp()">
  <ion-item>
    <ion-label>username</ion-label>
    <ion-input type="text" formControlName="username"></ion-input>
  </ion-item>
  <ion-item>
    <ion-label>password</ion-label>
    <ion-input type="text" formControlName="password"></ion-input>
  </ion-item>
  <ion-button
  expand="block"
   type="submit" [disabled]="!myForm.valid"
  >Submit</ion-button> 
</form>

通过使用 ngSubmit，您可以将按钮 (type="submit") 链接到表单。如果输入无效，我添加了 [disabled]="!myForm.valid" 以禁用按钮。

【讨论】：

【解决方案2】：

事实证明，我没有在我的模块中包含我的组件。我在我的模块中检查了神经，因为我认为它会自动添加

【讨论】：