角度材质对话框预先填充的输入字段不会验证

Question

我有一个mat对话框，可以从（mat-）表中的编辑按钮打开。当对话框打开时，它会传递数据以填充一些输入字段。 其中一个输入验证了它不能为空的规则。

我的问题是，Angular不会将接收到自动填充值的输入元素识别为具有值（它在Web检查器和屏幕上具有“值”）。

这意味着，在用户通过删除和重新输入字符或键入新内容来编辑字段之前，“保存”按钮仍然是灰色的。不需要编辑字段，如果它们收到值，则它是有效字段。

那么如何才能让验证识别出输入字段不是空的，而且它确实有一个值？ （我不能只删除验证的原因，它必须有一个值，即!= ''）。

因此，除非用户输入为空或者用户删除输入，否则验证应该通过。或者换句话说，如果输入在对话框打开时收到值，并且用户单独留下它，则验证应该通过。

未被识别的自动填充值的副作用是，如果数字未更改，则它将作为null发布到后端。因此，当在视图中刷新数据时，用户编辑的数字30现在为0.这样，因为表单显示自动填充的数据，但不知何故角度不会“看到”它。

简单输入：

  <div class="form">
    <mat-form-field>
      <input matInput #input
             class="form-control"
             placeholder="Name"
             [(ngModel)]="data.name"
             name="name"
             selected="data.name"
             required
             [value]="this.getFunc?.name"
      >
      <mat-error *ngIf="data.name == ''">{{getErrorMessage()}}</mat-error>
    </mat-form-field>
  </div>

不知道这里的component.ts文件要显示什么（？！） 在父组件中使用dialogRef.componentInstance = foo.bar;，对话框在输入字段中获取正确的值，如果用户删除然后重新键入值，则通过API发回正确的值。

问题是角度无法“看到”输入。 尝试了很多不同的东西，包括SO /这里的所有其他答案。 抱歉长文本和小代码，但没有任何东西可以显示角度如何识别输入字段是否包含值。

Answer 1

我长时间努力寻找这个问题的答案，我认为我有“正确”的方法（至少其中一个）。所以我会在这里发布：

首先，我改变了我的表单，在表单元素中使用'formGroup'，如下所示：

<form class="mat-dialog-content" (ngSubmit)="submit()" #formControl="ngForm" [formGroup]="patchForm">
      <div class="form">
        <mat-form-field>
          <input matInput #input
                 class="form-control"
                 placeholder="name"
                 name="name"
                 formControlName="name"
                 id="name"
                 selected="data.name"
                 required
          >
          <mat-error *ngIf="data.name== ''">{{getErrorMessage()}}</mat-error>
        </mat-form-field>
      </div>
      [... repeat div class="form" blocks for other inputs/dropdowns etc ...]

请注意，我必须从所有表单字段元素中删除[(ngModel)]="someVal"。如果您尝试将它们与formGroup一起使用，Angular将会抖动。

现在添加您在上面的代码中看到的元素属性formControlName="name"。

然后我不得不添加到app.module.ts ReactiveFormsModule：

import { FormsModule, ReactiveFormsModule } from '@angular/forms';

并将其添加到同一文件的imports数组中：

 imports: [
    BrowserModule,
    ...
    FormsModule,
    ReactiveFormsModule
  ],  

在component.ts文件中，我根据[formGroup]="patchForm"的文档设置了https://angular.io/api/forms/FormGroup#setvalue 我的对话框中有3个字段：

  patchForm = new FormGroup({
    age: new FormControl(),
    name: new FormControl(),
    numberLegs: new FormControl()
  });

因此，formControl需要一个对应于表单的对象。在我的onInit函数中，我调用API来获取我想要填充表单的数据，因此在该订阅者中我使用Angular中的patchValue()方法来设置值：

this.projectService.getProjectFunction(this.projId, this.rowId).subscribe(x=> { 
  this.fetchedProjFunc = x;
  // patchFrom expects an object matching to the formgroup, field by field.
  this.patchForm.patchValue({
    age: this.fetchedProjFunc['age'],
    name: this.fetchedProjFunc['name'],
    numberLegs: this.fetchedProjFunc['numberLegs']
   });
});

这似乎有效。然后我必须设置我返回到返回对象中的API /数据库的对象的值以指向正确的值，因此当用户单击“保存”按钮时，它会调用包含该对象的“confirmPut”函数要发送的数据，如下所示：

 public confirmPut(): void {
    this.projectFunction = {
        ...
        name: this.patchForm.value['name'],
        ...

它反过来调用PUT到API的函数。

我认为就是这样，表单按预期验证空字符串和缺失值。

如果我错过了任何东西，有人读过这个，请告诉我...... :)