Angular 9应用程序错误:在“材料设计"对话框中渲染表单字段失败 [英] Angular 9 app bug: rendering form fields in a Material Design Dialog fails

问题描述

我正在使用Angular 9和PHP开发任务"应用程序.我在尝试用数据预填充更新表单时遇到了Cannot find control with name: <controll name>错误.

I am working on a "Tasks" application in Angular 9 and PHP. I run into this a Cannot find control with name: <controll name> error while trying to pre-populate the update form with data.

表单模板:

<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文件中:

In the component's .ts file:

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

In the browser console, I get this error (for every form field): Cannot find control with name: 'title'.

此问题的原因似乎是这样的事实，在另一个组件中，我通过单击按钮触发的角材料对话框" 中打开了表单:

The cause of this problem seems to be the fact that, in another component I open the form in an Angular Material Dialog triggered by the click of a button:

<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中添加了它

In order to make the dialog above work, I also added this in the TaskModule

entryComponents: [TestFormComponent];

但是似乎对话框在填充表单之前就打开了，这就是表单从不填充的原因.

But it seems that the dialog opens before the form is populated, which is the reason why the form never gets populated.

如何解决此问题?

推荐答案

在this._apiService.getTaskInfo()解决响应之前，我看不到模板中有任何条件可以阻止<form [formGroup]="updateTask" name="edit_task_form">的呈现，因此出现错误formControl.

I don't see any condition in template to block render of <form [formGroup]="updateTask" name="edit_task_form"> until this._apiService.getTaskInfo() resolve a response, hence you get the error formControl not found.

在getTaskInfo()订阅中添加标记

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

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

，然后在模板中添加

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

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

在stackblitz中查找演示代码在这里(请不要介意从问题中复制过来的html)

Find a demo code in stackblitz here (please don't mind the html, just copied from the question)

这篇关于Angular 9应用程序错误:在“材料设计"对话框中渲染表单字段失败的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！