角度反应形式未显示在屏幕上答案

【问题标题】：Angular reactive form not displaying onscreen角度反应形式未显示在屏幕上
【发布时间】：2022-01-09 08:56:54
【问题描述】：

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

我认为要么 A. 这是一个时间问题（即更改检测延迟、formGroup 未被正确识别等）和/或 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
    });

  }

模板文件sn-p：

<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>

组件模块.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 正在预填表单。

【问题讨论】：

你的构造函数（）在哪里？或者在哪里声明：this.cdr.detectChanges();@Bodrov
@Armando 我用构造函数更新了帖子。
请也上传你的 app.module 文件...我想看看...不管怎样我会马上发布我的答案...
嘿@Armando，我在帖子中添加了模块。
根据屏幕截图，表单输入似乎在屏幕上，因为 patchValue 正在填充模板。我的猜测是这是一个 CSS 问题。我没有使用过 Angular Material，但您是否包含了该库所需的所有样式表？

标签： angular typescript forms angular-reactive-forms

【解决方案1】：

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

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

【讨论】：

【解决方案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() 中传递同样的代码

【讨论】：