FormControlNameIonic5.9.1和Angular12-有解無憂

我正在嘗試在我的應用程式上使用反應式表單。我正在使用 Angular 12 和 Ionic 5.9.1。我檢查了最新的檔案在離子網站中，似乎沒有 formControlName 屬性。使用 formControlName 屬性是我在網上看到的常用實作。我最近才開始探索 Ionic。

我正在使用 Ionic 的標簽模板。我有 tabs1 并在其中創建了一個帶有表單的模式。表格的代碼如下：

<ion-content>
  <ion-list lines="full" >
    <ion-list-header lines="full">
      <ion-label>
        Money Out Information
      </ion-label>
    </ion-list-header>
    
    <form [formGroup]="formGroup">
      <ion-item>
        <ion-label position="fixed">Amount</ion-label>
        <ion-input formControlName="amount" name="amount"></ion-input>
      </ion-item>
      <ion-button expand="block" fill="outline" (click)="submitForm()">Add Money Out</ion-button>
    </form>
  </ion-list>
</ion-content>

而我的 TS 檔案如下

formGroup: FormGroup;

constructor(
  public modalController: ModalController,
  public formBuilder: FormBuilder) { 
    
  }

ngOnInit() {
  this.formGroup = this.formBuilder.group({
    amount: ['', Validators.required]
  });
}

submitForm() {
  console.log(this.formGroup.value);

  this.modalController.dismiss({
    'dismissed': true
  });
}

當我記錄 formGroup.value 時，金額仍然是空白。因此，我得出結論認為系結沒有發生。有沒有辦法將 FormControl 系結到離子輸入？Ionic 是否改變了將資料系結到表單的方式？有沒有辦法將 FormControl 直接系結到離子輸入而不是使用 FormGroup？

uj5u.com熱心網友回復：

我能夠通過將新的模態組件添加到 app.module.ts 檔案的宣告中來使其作業。我使用 ionic-cli 生成組件，但我不確定為什么它沒有將組件添加到所需的檔案中。

uj5u.com熱心網友回復：

對您的 TS 檔案進行這些更改

export class Tab4Page implements OnInit, OnDestroy {
formGroup!: FormGroup;
...

constructor(
    private builder:FormBuilder,
  ) { }

ngOnInit() {
  this.formGroup = this.formBuilder.group({
    amount: ['', Validators.required]
  });
}

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

標籤：有角的离子框架角反应形式

上一篇：靜音/停止后臺運行的視頻（Delphi-Android應用程式）

下一篇：在SQLite中拆分字串