HTML表单字段未显示触摸状态 - Angular 7答案

【问题标题】：HTML Form field not showing touched status - Angular 7HTML表单字段未显示触摸状态 - Angular 7
【发布时间】：2019-05-07 17:43:06
【问题描述】：

我正在尝试在表单中输入一些数据，但它没有给我touched 状态。因此，在向用户发送回消息时总是会发生错误。

我在我的 TS 文件中使用 FormBuilder 来存储来自 HTML 的值。无论我是否输入数据，它都会给我这个错误。

我迷路了。

错误

firstName: FormControl {validator: ƒ, asyncValidator: ƒ, _onCollectionChange: 
ƒ, pristine: true, touched: false, …}

价值：

value: {firstName: "", .... }

我尝试在ngIf 条件下检查pristine，但没有。

这是我的 HTML 代码：

<form [formGroup]="formInfo" (ngSubmit)="validateForm()">

  <label>First Name <input type="text" maxlength="35" />
<div *ngIf="submitted && formInfo.controls.firstName.errors" class="error">

  <div *ngIf="(formInfo.controls.firstName.pristine) && (formInfo.controls.firstName.errors.required)">Your first
    name is required.</div>
</div>
</label>
....
 </form>

这是我的 TypeScript 代码：

 // Class Attributes
 formInfo: FormGroup;
 submitted = false;
 success = false;

 constructor(private builder: FormBuilder) { }

 // Form data as an object
 ngOnInit() {
    this.formInfo = this.builder.group({
     firstName: ['', Validators.required],
     ....
     });
 }

 // Validates the form
 validateForm() {
    this.submitted = true;

    console.log(this);
    console.log(this.formInfo);

   if (this.formInfo.invalid) {
      return;
   }

    this.success = true;
  }
}

我只是想让表单说，如果用户没有，你需要输入一个值。否则不会有错误提示。

我添加了以下代码来查看我的 TS 文件中是否有偶数值。

 <form [formGroup]="formInfo" (ngSubmit)="validateForm()">

  <label>First Name <input type="text" maxlength="35" />
<div *ngIf="submitted && formInfo.controls.firstName.errors" class="error">

  <div *ngIf="(formInfo.controls.firstName.pristine) && (formInfo.controls.firstName.errors.required)">Your first
    name is required.</div>
</div>
</label>
....
 </form>

<!-- I added this -->
<div *ngIf="submitted">
    <strong>First Name</strong>
    <span>{{ formInfo.controls.firstName.value }}</span>
 </div>

该值似乎从未保存到 TS 中。

【问题讨论】：

检查这里是否有任何线索：stackblitz.com/edit/angular-reactive-forms-basics-form-group

标签： html angular typescript error-handling runtime-error

【解决方案1】：

如果用户尚未更改 UI 中的值，formInfo.controls.firstName.pristine 将是 true。 https://angular.io/api/forms/AbstractControl#pristine

你会想要修改

<div *ngIf="(formInfo.controls.firstName.pristine) && (formInfo.controls.firstName.errors.required)">Your first
    name is required.</div>

成为

<div *ngIf="formInfo.controls.firstName.invalid && formInfo.controls.firstName.errors.required">Your first
    name is required.</div>

【讨论】：

它不起作用，我得到同样的错误，但现在它没有显示任何错误消息。
请发布一个 plunker 或类似的。
@Compilerv2，我刚刚编辑了我的答案，你真的应该检查你的验证是否有效。让我知道这是怎么回事。
不，它不起作用。现在我得到了原来的错误。

【解决方案2】：

要解决我的问题，你只需要改变

<form [formGroup]="formInfo" (ngSubmit)="validateForm()">

<label>First Name <input type="text" maxlength="35" />
<div *ngIf="submitted && formInfo.controls.firstName.errors" class="error">

<div *ngIf="(formInfo.controls.firstName.pristine) && 
(formInfo.controls.firstName.errors.required)">Your first
name is required.</div>
</div>
</label>
....
</form>

到

<form [formGroup]="formInfo" (ngSubmit)="validateForm()">

<label>First Name <input type="text" maxlength="35" formControlName="firstName">
<div *ngIf="submitted && formInfo.controls.firstName.errors" class="error">

<div *ngIf="(formInfo.controls.firstName.pristine) && 
(formInfo.controls.firstName.errors.required)">Your first
name is required.</div>
</div>
</label>
....
</form>

很抱歉给您带来不便...

【讨论】：