角度反應形式未顯示在螢屏上

我有一個用于正確顯示的反應式表單（即它顯示輸入框），但是在我開始對代碼進行調整后，我再也沒有看到輸入框。

我在想 A. 這是一個時間問題（即更改檢測延遲、formGroup無法正確識別等）和/或 B. 我的組件或模板中缺少某些內容。控制臺中沒有錯誤，所以我無法確定錯誤的原因——但是，我懷疑我需要添加一些東西。

編輯：我在 DOM 中注意到<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 = '[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
    });

  }

模板檔案片段：

<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正在預填表單。

uj5u.com熱心網友回復：

我有<mat-error>每個密碼欄位，它們干擾了表單（可能是由于*ngIf）：

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

uj5u.com熱心網友回復：

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() 中傳遞相同的代碼

標籤：有角的 打字稿 形式 角反应形式

上一篇：在React專案中匯入函式

下一篇：單擊按鈕時將值增加3，當達到陣列長度時將其重置為0