Angular 9 應用程序錯誤：在 Material Design 對話框中渲染表單字段失敗

Question

我正在開發 Angular 9 和 PHP 中的“任務”應用程序。 我在嘗試使用數據預填充更新表單時遇到了Cannot find control with name: <controll name>錯誤。

表單模板：

<form [formGroup]="updateTask" name="edit_task_form">
  <mat-form-field appearance="standard">
    <mat-label>Title</mat-label>
    <input matInput placeholder="Title" formControlName="title" placeholder="Title">
  </mat-form-field>

  <mat-form-field appearance="standard">
    <mat-label>Short Description</mat-label>
    <input matInput placeholder="Short description" formControlName="short-description" placeholder="Short Description">
  </mat-form-field>

  <mat-form-field>
    <mat-label>Category</mat-label>
    <mat-select formControlName="tags">
      <mat-option *ngFor="let category of categories" [value]="category.id">{{category.name | titlecase}}</mat-option>
    </mat-select>
  </mat-form-field>

  <mat-form-field appearance="standard">
    <mat-label>Full Description</mat-label>
    <textarea matInput formControlName="full-description" placeholder="Full Description"></textarea>
  </mat-form-field>

  <div class="text-center">
    <button mat-flat-button type="submit" color="accent" [disabled]="updateTask.pristine || updateTask.invalid">Update</button>
  </div>
</form> 

在組件的 .ts 文件中：

task_hash: string;
currentTask: any = {};

constructor(private _apiService: ApiService, private _formBuilder: FormBuilder, private _sharedService: SharedService) {}

updateTask = this._formBuilder.group({});

ngOnInit(): void {

    this.task_hash = this._apiService.task_hash;

    this._apiService.getTaskInfo().subscribe(res => {
        this.currentTask = res;
        const formInfo = this.currentTask.info;

        formInfo.forEach(item => {
            if (item.key === 'title' || item.key === 'short-description' || item.key === 'description' || item.key === 'tags') {
                this.updateTask.addControl(item.key, this._formBuilder.control(item.data, item.key !== 'tags' ? Validators.required : null));
            };
        });
    });
}

在瀏覽器控制台中，我收到此錯誤（對於每個表單字段）： Cannot find control with name: 'title' 。

此問題的原因似乎是，在另一個組件中，我在單擊按鈕觸發的Angular 材質對話框中打開表單：

<button mat-button color="primary" (click)="openForm($event, task.task_hash)">Open</button>

In the trigger's .ts file

openEditForm(event, task_hash): void {

    event.stopPropagation();

    // Dialog Configuration
    const dialogConfig = new MatDialogConfig();
    dialogConfig.width = '60%';

    // Dialog Open
    this._matDialog.open(TaskFormComponent, dialogConfig);

    // Pass test_hash to API Service
    this.apiService.test_hash = test_hash;
}

為了使上面的對話框正常工作，我還在 TaskModule 中添加了這個

entryComponents: [TestFormComponent];

但似乎對話框在填充表單之前打開，這就是表單永遠不會被填充的原因。

我該如何解決這個問題？

Answer 1

在this._apiService.getTaskInfo()解決響應之前，我在模板中看不到任何阻止渲染<form [formGroup]="updateTask" name="edit_task_form">的條件，因此您收到錯誤 formControl not found。

在getTaskInfo()訂閱中添加一個標志

... this._apiService.getTaskInfo().subscribe(res => {... this.formLoaded = true; ... }...

並在模板中添加

<form *ngIf="formLoaded" [formGroup]="updateTask" name="edit_task_form">... ... </form>

在這里找到stackblitz中的演示代碼（請不要介意html，只是從問題中復制的）

Answer 2

在組件 class 上實現ngAfterViewInit接口：

@component
class AfterViewInitComponent implements AfterViewInit {

    ngAfterViewInit: void {
        this.task_hash = this._apiService.task_hash;

    this._apiService.getTaskInfo().subscribe(res => {
        this.currentTask = res;
        const formInfo = this.currentTask.info;

        formInfo.forEach(item => {
            if (item.key === 'title' || item.key === 'short-description' || item.key === 'description' || item.key === 'tags') {
                this.updateTask.addControl(item.key, this._formBuilder.control(item.data, item.key !== 'tags' ? Validators.required : null));
            };
        });
    });
 }