错误：formGroup 需要一个 FormGroup 实例。请传入一个答案

【问题标题】：Error: formGroup expects a FormGroup instance. Please pass one in错误：formGroup 需要一个 FormGroup 实例。请传入一个
【发布时间】：2019-11-29 00:35:03
【问题描述】：

我正在创建一个表单来编辑客户端，但由于某种原因我遇到了很多错误。第一个错误是“错误：formGroup 需要一个 FormGroup 实例。请传入一个。”。

然后，对于我的 HTML 中的每个输入行，我都会收到“ERROR TypeError: Cannot read property 'get' of undefined”。

我在另一个组件中使用了几乎相同的配置，它工作正常，我不明白为什么这会引发错误。

this.myGroup = new FormGroup({
   firstName: new FormControl()
});

<form [formGroup]="modifyClientForm" [ngClass]="{'view-only': inViewMode}" (ngSubmit)="modifyClient()">

<!--BLOCK 1: TAB 1 start-->
<div *ngIf="activeTab==='clientName'" class="white-bg">
    <div class="form-row">
        <div class="form-group col-12">
            <label for="companyName">Ettevõtte nimi<span *ngIf="!inViewMode" class="required">*</span></label>
            <input class="form-control" formControlName="companyName" name="companyName" id="companyName">
        </div>
    </div>
    <div class="form-row">
        <div class="form-group col-sm-12 col-md-6">
            <label for="firmRegNo">Reg number<span *ngIf="!inViewMode" class="required">*</span></label>
            <input formControlName="firmRegNo" class="form-control" name="firmRegNo" id="firmRegNo">
        </div>
    </div>
    <div class="form-row">
        <div class="form-group col-sm-12">
            <label for="address">Aadress</label>
            <input class="form-control" id="address" name="address" formControlName="address" >
        </div>
    </div>
    <h4 class="form-title-mt">Kontakt</h4>

    <div class="form-row">
        <div class="form-group col-sm-12">
            <label for="clientName">Kliendi nimi</label>
            <input class="form-control" id="clientName" name="clientName" formControlName="clientName">
        </div>
    </div>
    <div class="form-row">
        <div class="form-group col-sm-6">
            <label for="phoneOne">Telefon 1</label>
            <input class="form-control" id="phoneOne" name="phoneOne" formControlName="phoneOne">
        </div>
        <div class="form-group col-sm-6">
            <label for="phoneTwo">Telefon 2</label>
            <input class="form-control" id="phoneTwo" name="phoneTwo" formControlName="phoneTwo" >
        </div>
    </div>
    <div class="form-row">
        <div class="form-group col-sm-12">
            <label for="email">Email</label>
            <input class="form-control" id="email" name="email" formControlName="email">
        </div>
    </div>
    <div class="form-row mt-3">
        <div class="form-group col-sm-12">
            <label for="explanation">Selgitus</label>
            <textarea class="form-control" id="explanation" name="explanation" placeholder="Hetkel puudub" formControlName="explanation"></textarea>
        </div>
    </div>
</div>
<!--BLOCK 1: TAB 1 end-->

<!--BLOCK 1: TAB 2 start-->
<div *ngIf="activeTab==='contract'" class="white-bg">
    <app-client-contracts [activeClient]="activeClient"></app-client-contracts>
</div>
<!--BLOCK 1: TAB 2 end-->

<!--BLOCK 1: TAB 3 start-->
<div *ngIf="activeTab==='files'" class="white-bg">
    <!-- Todo: kliendi failid -->
</div>
<!--BLOCK 1: TAB 3 end-->

打字稿：

modifyClientForm: FormGroup;
activeClient: Client;

  constructor(private clientService: ClientService, private formBuilder: FormBuilder) { }

  ngOnInit() {
    this.inViewMode = true;
    this.clientId = parseInt(window.location.pathname.split('/')[2], 10);
    this.clientService.getClientById(this.clientId)
        .subscribe(data => this.activeClient = data);
    this.modifyClientForm = this.formBuilder.group({
         companyName: [this.activeClient.companyName],
         firmRegNo: [this.activeClient.firmRegNo],
         address: [this.activeClient.address],
         clientName: [this.activeClient.clientName],
         phoneOne: [this.activeClient.phoneOne],
         phoneTwo: [this.activeClient.phoneTwo],
         email: [this.activeClient.email],
         explanation: [this.activeClient.explanation]
    });
}

【问题讨论】：

你试过在构造函数中初始化 modifyClientForm 吗？
尝试在表单中添加一个 *ngIf 以避免表单为空时出错（首先)
@Eliseo 表单消失了，现在它给我一个错误，即“this.activeClient”在 TS 的表单构建器中未定义
@EduardoJunior 我该怎么做？
你需要把 this.modifyClientForm=.. 放在 subscribe 函数里面，否则它没有任何价值。当调用异步函数时，Angular 会调用并继续下一条指令，所以如果你把 this.modifyClientForm=.. 放在订阅之外，this.activeClient 没有任何价值

标签： angular forms

【解决方案1】：

问题是您的 html 在表单组初始化之前呈现。

您可以通过将表单放在 div 中并像这样使用 *ngIf 来解决此问题：

<div *ngIf="modifyClientForm">
    <form [formGroup]="modifyClientForm" [ngClass]="{'view-only': inViewMode}" 
    (ngSubmit)="modifyClient()">
    ....other code...
     </form>
<div>

我希望这对某人有帮助！

【讨论】：

这个问题在 cmets 中得到了解决，在这种情况下 ngIf 方法没有帮助。