FormGroup不能使用angular和ionic-有解無憂

我已經嘗試了很長時間，但不知道為什么它不起作用。我遵循了不同的教程并閱讀了有關此主題的 Ionic 和 Angular 檔案。

FormGoup 不適用于我在 html 中的 from。按下按鈕后的值仍然保持不變并且不會更新。

我的組件中的代碼：

export class CreateNoteComponent implements OnInit {

  noteForm = this.formBuilder.group({
    firstName: ['value'],
    lastName: ['value'],
    age: ['value'],
  });

  constructor( private router: Router, private dataService: DataService, private formBuilder: FormBuilder ) {
  }

  ngOnInit() {
  }

  goBack() {
    this.router.navigate(['./home']);
  }

  logForm() {
    console.log(this.noteForm.value);
  }
}

HTML 中的代碼：

<ion-content [fullscreen]="true">
  <div >
    <h2> Create new Note</h2>
  </div>

  <div >
    <form [formGroup]="noteForm">
      <ion-item>
        <ion-label position="floating">First Name</ion-label>
        <ion-input formControlName="firstName" type="text"></ion-input>
      </ion-item>
  
      <ion-item>
        <ion-label position="floating">Last Name</ion-label>
        <ion-input formControlName="lastName" type="text"></ion-input>
      </ion-item>
  
      <ion-item>
        <ion-label position="floating">Age</ion-label>
        <ion-input formControlName="age" type="number"></ion-input>
      </ion-item>

      <ion-button type="button" (click)="logForm()" block>Add Todo</ion-button>
    </form>
  </div>
</ion-content>

模塊中的代碼：

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

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

import { CreateNoteComponent } from './create-note.component';

@NgModule({
  imports: [ CommonModule, IonicModule, FormsModule, ReactiveFormsModule ],
  declarations: [CreateNoteComponent],
  exports: [CreateNoteComponent]
})
export class CreateNoteComponentModule {}

uj5u.com熱心網友回復：

你可以使用this.noteForm.getRawValue()代替this.noteForm.value？

uj5u.com熱心網友回復：

嘗試像這樣更改 HTML 的結構，這應該顯式觸發表單處理：

<ion-content [fullscreen]="true">
  <div >
    <h2> Create new Note</h2>
  </div>

  <div >
    <form [formGroup]="noteForm" (ngSubmit)="logForm()">
      <ion-item>
        <ion-label position="floating">First Name</ion-label>
        <ion-input formControlName="firstName" type="text"></ion-input>
      </ion-item>
  
      <ion-item>
        <ion-label position="floating">Last Name</ion-label>
        <ion-input formControlName="lastName" type="text"></ion-input>
      </ion-item>
  
      <ion-item>
        <ion-label position="floating">Age</ion-label>
        <ion-input formControlName="age" type="number"></ion-input>
      </ion-item>

      <ion-button type="submit">Add Todo</ion-button>
    </form>
  </div>
</ion-content>

轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/358041.html

標籤：有角的离子框架

上一篇：如何將id傳遞給模態視窗組件

下一篇：找不到茉莉花測驗離子圖示svg