Блог

У меня есть реактивная форма, которая раньше отображалась правильно (т. Е. Показывала поля ввода), но после того, как я начал вносить коррективы в код, с тех пор я не видел полей ввода.

Я думаю, что либо А. Это проблема со временем (т. Е. задержка обнаружения изменений, formGroup ошибка распознавания и т. Д.) И/или B. Мне чего-то не хватает в моем компоненте или шаблоне. В консоли нет ошибок, поэтому я не могу точно определить причину ошибки—однако я подозреваю, что мне нужно что-то добавить.

Редактировать: Я заметил в DOM то lt;form ng-reflect-form=[object Object] , что подозрительно.

компонент.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  });   }   

фрагмент файла шаблона:

 lt;form [formGroup]="formGroup" #myForm="ngForm" class="integration-form"gt;  lt;!-- The first and last name mat-form-fields are basically the same as below --gt;   lt;mat-form-field appearance="outline" class="full-width"gt;  lt;input matInput autofocus formControlName="businessName" /gt;  lt;mat-labelgt;lt;/mat-labelgt;  lt;/mat-form-fieldgt;   

компонентный модуль.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 это предварительное заполнение формы.

У меня было lt;mat-errorgt; для каждого из полей пароля, и они мешали форме (вероятно, из-за *ngIf ):

lt;mat-error *ngIf="password.hasError('required')"gt;The passwords must matchlt;/mat-errorgt;

 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() тоже