角度材质对话框预先填充的输入字段不会验证-Java 学习之路

我有一个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发回正确的值 .

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

1 回答

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

首先，我改变了我的表单，在表单元素中使用'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的函数 .

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

如果我错过了任何东西，有人读过这个，请告诉我...... :)
回复于 2024-04-20T19:44:49+08:00

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

1 回答

相关问题