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

Question

我正在尝试以某种形式输入一些数据，但是它没有给我touched的状态。因此，向用户发送消息时总是会发生错误。

我在我的TS文件中使用FormBuilder来存储HTML中的值。无论是否放入数据，都会出现此错误。

我迷路了。

错误

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

值：

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

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

这是我的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中。

Answer 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>

Answer 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>

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