模板驱动形式将所有内容标记为已触摸 - Angular 7

Posted 2023-03-13

【中文标题】模板驱动形式将所有内容标记为已触摸 - Angular 7

【英文标题】：Template Driven Form Mark All as touched - Angular 7

【发布时间】：2020-03-16 08:15:21

【问题描述】：

我正在使用模板驱动的表单进行验证。当用户在最后一个必填字段上模糊时，我想将所有字段标记为已触摸。目前我只能通过传递表单并单独执行每个字段来做到这一点。从研究中我看到有一种方法可以做 MarkAllAsTocuhed 但它会引发错误。使用 Angular 7 是否有更好/正确的方法来执行此操作。我也尝试循环控制控件，但因为它是一个也不起作用的对象。

.html

 <form #myForm="ngForm">
    <mat-form-field class="input-field">
              <input #field1="ngModel" name="name1" 
             [(ngModel)]="fieldOne" type="text" matInput placeholder="Field 1" required>     
    </mat-form-field>

    <mat-form-field class="input-field">
              <input #field2="ngModel" name="name2" 
             [(ngModel)]="fieldTwo" type="text" matInput placeholder="Field 2" required>     
    </mat-form-field> 

    <mat-form-field class="input-field">
              <input #field2="ngModel" name="name3" 
             [(ngModel)]="fieldThree" type="text" matInput placeholder="Field 3" required>     
    </mat-form-field> 

    <mat-form-field class="input-field">
              <input #field3="ngModel" name="name4" 
             [(ngModel)]="fieldFour" type="text" matInput placeholder="Field 4" 
             (blur)="touchAllFields(myForm.form)" required>     
  </mat-form-field>
</form>

.TS

touchAllFields(form)
//Working Version
form.controls.name1.markAsTouched();
form.controls.name2.markAsTouched();
form.controls.name3.markAsTouched();
form.controls.name4.markAsTouched();
form.controls.name5.markAsTouched();
form.controls.name6.markAsTouched();
form.controls.name7.markAsTouched();
form.controls.name8.markAsTouched();

//Failed Attempt
form.controls.markAllAsTouched(); //typeError: form.controls.markAllAsTouched is not a function

//Failed Attempt 
for(var i = 0; i < form.controls.length; i++)
  form.controls[i].markAllAsTouched(); //Failed since its an object and not an array
 

【问题讨论】：

嗨，Flash，您可以查看以下网址。有一个解决方案可能会有所帮助。 ***.com/questions/40529817/…

谢谢这实际上是我的参考点。但解决方案似乎长期不必要。我认为我应该能够以某种方式使用 markAllAsTouched，但我认为我可能实施错了。

【参考方案1】：

你可以试试这个：

发现 Object.keys 可以处理这个问题。

 Object.keys(this.form.controls).forEach(key => 
      this.form.get(key).markAsTouched();
    );

对于 Angular 8+，您可以使用：

  Object.keys(this.form.controls).forEach(key => 
      this.form.controls[key].markAsTouched();
    );

【讨论】：

感谢第二个工作，尽管我使用的是 Angular 7。知道为什么 form.controls.markAllAsTouched 不起作用吗？

@Flash 你能给我正确答案吗？不知道，可能方法不存在！

是的，我在几个小时内找到了您，只是想给其他人一个回答的机会。谢谢

【参考方案2】：

ngForm 本身没有 markAllAsTouched 方法，因为它不是 FormGroup 或 FormArray。但是，NgForm 有一个 formGroup 实例，可通过 .form 或 .control - source 访问。

从 Angular2 到当前最新版本 (Angular10) 都可以使用此功能

所以你的问题的正确答案应该如下：

form.form.markAllAsTouched();

或

form.control.markAllAsTouched();