formGroup需要一個FormGroup實例-Angular 4

Question

我需要在提交時獲取所有表單值。 代碼如下。

html文件

<form id="cloneInfo" *ngIf="selectedAccount" [formGroup]="todo" (ngSubmit)="cloneRecord()">
      <div class="form-group row">
        <label for="staticEmail" class="col-sm-4 col-form-label">Email</label>
        <div class="col-sm-8">
          <input type="text" class="form-control" id="staticEmail">
        </div>
      </div>

      <div class="form-group row">
        <label for="inputPassword" class="col-sm-4 col-form-label">Account Id</label>
        <div class="col-sm-8">
          <input type="text" class="form-control" id="accountRefId">
        </div>
      </div>
     <button type="submit" class="btn btn-primary">Submit</button>
</form>

組件文件

import { Component, OnInit } from '@angular/core';       
import {FormGroup, FormBuilder, Validators} from '@angular/forms';
@Component({
  selector: 'app-account-list',
  templateUrl: './account-list.component.html',
  styleUrls: ['./account-list.component.scss'],
  providers: [UtilsService]
   })

export class AccountListComponent implements OnInit {
  todo: FormGroup;
 constructor(private utilsService: UtilsService) {}

 ngOnInit() {
    this.getAccounts();
 }

 cloneRecord() {
    console.log(this.todo.value)
 }

}

但是我收到以下錯誤

ERROR Error: formGroup expects a FormGroup instance. Please pass one in.

enter code here

代碼有什么問題嗎？ 如何解決這個問題？

Answer 1

您不需要初始化待辦事項嗎？

constructor(private utilsService: UtilsService,
private fb: FormBuilder
) {}

this.todo = this.fb.group({
control: ['initialValue', [Validators.required]]
})

Answer 2

首先，您的輸入中必須包含formControlName 。 其次，您必須通過FormBuilder或手動初始化待辦事項， 這非常有幫助。