Angular 反应式表单未显示在屏幕上

Question

我有一个用于正确显示的响应式表单（即它显示了输入框），但是在我开始调整代码之后我再也没有看到输入框。

我在想 A. 这是一个时间问题（即变化检测延迟，formGroup 没有被正确识别，等等）and/or B. 我遗漏了一些东西我的组件或模板。控制台没有错误，所以我无法确定错误的原因---但是，我怀疑我需要添加一些东西。

编辑：我在 DOM 中注意到 <form ng-reflect-form=[object Object]，这是可疑的。

component.ts:


export class IntegrationComponent implements OnInit {

  constructor(
    private location : Location,
    private snackBar: MatSnackBar,
    private cdr: ChangeDetectorRef
  ) { }

  formGroup = new FormGroup({
    firstName: new FormControl(null, Validators.required),
    lastName: new FormControl(null, Validators.required),
    email: new FormControl(null, Validators.required),
    businessName: new FormControl(null, Validators.required)
  });

  ngOnInit(): void {
    this.formGroup.reset(); // supposed to empty the form on page load
    this.getUserInfo();
    this.cdr.detectChanges();
  }

  getUserInfo() {
    const businessName = `Pur'n'Kleen Water Company`,
          firstName = 'Jim',
          lastName = 'Holden',
          emailAddress = 'holdenj@unnavy.gov';

    this.prefillForm(businessName, firstName, lastName, emailAddress); // this is working (see screenshot)
    this.cdr.detectChanges();
  }

  prefillForm(businessName: string, firstName: string, lastName: string, emailAddress: string) {
    this.formGroup.patchValue({
      firstName: firstName,
      lastName: lastName,
      email: emailAddress,
      businessName: businessName
    });

  }

模板文件片段：

<form [formGroup]="formGroup" #myForm="ngForm" class="integration-form">

<!-- The first and last name mat-form-fields are basically the same as below -->

    <mat-form-field appearance="outline" class="full-width">
      <input matInput autofocus formControlName="businessName" />
      <mat-label></mat-label>
    </mat-form-field>

组件module.ts:


import { CommonModule } from '@angular/common';
import { NgModule } from '@angular/core';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { RouterModule, Routes } from '@angular/router';

import { MatSliderModule } from '@angular/material/slider';
import { MatButtonModule } from '@angular/material/button';
import { MatFormFieldModule } from '@angular/material/form-field';
import { MatInputModule } from '@angular/material/input';
import { MatIconModule } from '@angular/material/icon';
import { MatRadioModule } from '@angular/material/radio';

import { xyzLayoutModule } from '@libs/layout';
import { xyzComponentsModule } from '@libs/components';

import { IntegrationComponent } from './components/integration/integration.component';

export const IntegrationRoutes: Routes = [
  {
    path: '',
    pathMatch: 'full',
    component: IntegrationComponent
  }
];
// debugger;
@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    ReactiveFormsModule,
    MatSliderModule,
    MatButtonModule,
    MatFormFieldModule,
    MatInputModule,
    MatIconModule,
    MatRadioModule,

    // xyz modules 
    xyzComponentsModule,
    xyzLayoutModule,

    PaymentsModule,

    // router
    RouterModule.forChild(IntegrationRoutes),
  ],
  declarations: [
    IntegrationComponent
  ],
  exports: [
    IntegrationComponent
  ]
})
export class IntegrationModule { }

这是一张屏幕截图，显示 patchValue 正在预填表格。

Answer 1

我为每个密码字段设置了 <mat-error>，它们干扰了表单（可能是由于 *ngIf）：

<mat-error *ngIf="password.hasError('required')">The passwords must match</mat-error>

Answer 2

formGroup = new FormGroup({
firstName: new FormControl(null, Validators.required),
lastName: new FormControl(null, Validators.required),
email: new FormControl(null, Validators.required),
businessName: new FormControl(null, Validators.required)

});

请在构造函数中初始化上面提到的 FormGroup 代码，或者您可以在 ngOnInit() 中将其传递给

Angular 反应式表单未显示在屏幕上

Angular reactive form not displaying onscreen

forms

typescript

angular

angular-reactive-forms