了解帶有Groups和ngModel資料的AngularFormBuilder以及它們如何/是否可以一起使用？

我在嘗試FormBuilder在我的 Angular 應用程式中使用以及如何根據我的ngModel資料在表單中設定默認值時遇到了一些問題。

在我的課堂上，我有以下代碼：

form: FormGroup;

constructor(
    private fb: FormBuilder,
) { }

ngOnInit() {

    this.form = this.fb.group({
        category: ['', [Validators.required]],
        quantity: [1, [Validators.required]],
        size: ['', [Validators.required]],
        title: ['', [Validators.required]],
    });
}

當我查看{{ form.value | json }}模板中的 時，它會顯示帶有空值的原始值。所以我決定嘗試在 FormBuilder 組中設定默認值，如下所示：

    this.form = this.fb.group({
        category: [this.item.category, [Validators.required]],
        quantity: [this.item.quantity, [Validators.required]],
        size: [this.item.size, [Validators.required]],
        title: [this.item.title, [Validators.required]],
    });

但是我收到了這些錯誤：

ERROR Error: formGroup expects a FormGroup instance. 
ERROR TypeError: Cannot read properties of undefined (reading 'category')
ERROR TypeError: Cannot read properties of undefined (reading 'value')

這是我的表單模板：

<form [formGroup]="form">
        <ion-item lines="none">
            <ion-label position="stacked">Category</ion-label>
            <ion-select [(ngModel)]="item.category" [ngModelOptions]="{standalone: true}">
                <ion-select-option *ngFor="let category of categories" [value]="category">
                    {{ category }}
                </ion-select-option>
            </ion-select>
        </ion-item>

        <ion-item lines="none">
            <ion-label position="stacked">Title</ion-label>
            <ion-input [(ngModel)]="item.title" [ngModelOptions]="{standalone: true}"></ion-input>
        </ion-item>

        <ion-item lines="none">
            <ion-label position="stacked">Size</ion-label>
            <ion-input [(ngModel)]="item.size" [ngModelOptions]="{standalone: true}"></ion-input>
        </ion-item>

        <ion-item lines="none">
            <ion-label position="stacked">Quantity</ion-label>
            <ion-input type="number" [(ngModel)]="item.quantity" [ngModelOptions]="{standalone: true}"></ion-input>
        </ion-item>

    </form>

任何想法我的方法有什么問題以及如何從我的默認值中獲取this.item出現在表單中？

uj5u.com熱心網友回復：

Zerospi，問題是您在變數“item”中有資料之前創建表單 - 這就是您看不到值的原因

1.-永遠不要將反應式表單和模板驅動（ngModel）混合在一起

使用[(ngModel)]="variable" [ngModelOptions]="{standalone: true}它的唯一得到的輸入的情況不屬于該FormGroup。

例如，你可以有一個“復選框”來顯示一個新的輸入。有些喜歡

movil:boolean=false;
form=new FormGroup({
  phone:new FormControl()
  mobile:new FormControl()
})
<form [formGroup]="form">
  Phone<input formControlName="phone">
  <input type="checkbox" [(ngModel)]="movil" 
          [ngModelOptions]="{standalone:true}">Mobile
  <input *ngIf="movil" formControlName="mobile">
</form>

好吧，我們真的用

  <input type="checkbox" [ngModel]="movil" 
          (ngModelChange)="movil=$event;!$event && form.get('mobile').setValue('')
          [ngModelOptions]="{standalone:true}">Mobile

如果我們取消選中“清理”FormControl“移動”

如何控制一個FormGroup？

2.-一般來說我們可以有一個功能的方式

getFromGroup(data:any=null)
{
   data=data || {phone:'',mobile:''}
   return this.fb.group({
      phone:[data.phone,Validators.required]
      mobile:data.mobile
   }
}

并使用

this.form=this.getFormGroup(this.item) //if we have an object "this.item"
this.form=this.getFormGroup() //if we want an empty Form

3.-另一種方法是使用 patchValue() 創建表單

   this.form=this.fb.group({
      phone:['',Validators.required]
      mobile:''
   }
   this.form.patchValue(this.item)

4.- 為了避免初始錯誤（例如，我們在呼叫 API 后創建表單），有時是 util 使用一些類似

<form *ngIf="form" [formGroup]="form">
...
</form>

5.- 記住 FormControl 是禁用的，不在 form.value 中顯示，你需要使用 form.getRawValue()

uj5u.com熱心網友回復：

關于表單有 2 種方法：模板驅動（更多邏輯.html和反應性（更多邏輯和控制.ts）。通過formBuilder注入，[formGroup]="form"你會選擇反應性方法，這種方法在經驗豐富的開發人員中傳播得更多，而且往往更舒服，因為它提供了更多的控制權你的表格。

在這種方法中使用雙向資料系結不是一個好習慣。您應該放入formControlName="controlNameXYZ"相應的輸入欄位，并對構建表單時定義的所有輸入欄位執行此操作。

不要忘記ReactiveFormsModule在imports模塊的內部陣列（或者AppModule如果您在整個應用程式中只有一個）。

uj5u.com熱心網友回復：

將回應式表單和模板驅動 (ngModel)混合在一起并不是一個好習慣。

如果你已經有了表單并且你的 HTML 表單有它的<form [formGroup]="form">，為了使用它，你只需要在你的 HTML formControlname 中使用它。例如，對于 size 欄位，將是這樣的：

<ion-input formControlName="size" "></ion-input>

而且，當您想在代碼中獲取它的值時，您只需要做：

const myValue = this.form.value?.size;
// or, maybe better way:
const myValue2 = this.form.get('size').value;

重要提示：為了使用回應式或模板表單，不要忘記將其模塊匯入主模塊（通常在 app-routing.module.ts 中）或要使用它們的模塊中。

import {FormsModule, ReactiveFormsModule} from '@angular/forms';

@NgModule({  
imports: [  
 // other imports ... 
FormsModule, // for template-driven 
ReactiveFormsModule,  // for Reactive
 ],  
})  
export class AppModule { }

標籤：

上一篇：Angular-等待HTTP回應進行評估

下一篇：如何將類傳遞給子組件？