I have a reactive form that used to display properly (i.e. it showed input boxes), but after I started making adjustments to the code I haven't seen the input boxes since.

I'm thinking that either A. It's a timing issue (i.e. change detection delay, the formGroup isn't recognized properly, etc) and/or B. I'm missing something from my component or template. There are no errors in the console, so I can't pinpoint the cause of the error---however, I'm suspecting that there's something I need to add.

Edit: I noticed in the DOM that <form ng-reflect-form=[object Object], which is suspicious.

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 = '[email protected]';

    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
    });

  }

template file snippet:

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

component 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 { }

Here's a screenshot, showing that patchValue is prefilling the form.

CodePudding user response：

I had <mat-error> for each of the password fields and they were interfering with the form (likely due to the *ngIf):

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

CodePudding user response：

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)

});

please do intialize this above mention FormGroup code in constructor or you can pass this same in ngOnInit() too