formGroup은 FormGroup 인스턴스 - 각도 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으로 초기화하거나 수동으로 this을 사용하면 매우 유용합니다.