显示未完成/无效表单字段/元素的数量

Question

我需要显示在完成表单时剩余的未完成/无效表单字段的数量。

似乎找不到任何东西，我不知道从哪里开始。

我该怎么做呢？

我目前有一个带有验证功能的反应式表单。

任何帮助都会很棒。

HTML

 <form [formGroup]="quote" (ngSubmit)="post(quote.value)">

 <!-- TITLE -->
<fieldset class="help-hover">
<div class="question-wrapper">
  <label class="question" for="quoteFormTitle">Your title</label>
  <div class="answer">
    <select formControlName="quoteFormTitle" id="quoteFormTitle" class="chosen-select">
      <option value="" disabled>Choose a title...</option>
      <option value="Mr">Mr</option>
      <option value="Mrs">Mrs</option>
      <option value="Miss">Miss</option>
      <option value="Ms">Ms</option>
      <option value="Doctor Male">Doctor - Male</option>
      <option value="Doctor Female">Doctor - Female</option>
    </select>
    <span class="tick-area"></span>
    <div class="error" *ngIf="quoteFormTitle.touched && quoteFormTitle.invalid">Please select a title.</div>
  </div>
</div>
<aside class="help">
  <p>Please select your title from the drop down list.</p>
</aside>
</fieldset>

<!-- FIRSTNAME -->
<fieldset class="help-hover">
<div class="question-wrapper">
  <label class="question" for="quoteFormFirstName">First name</label>
  <div class="answer">
    <input formControlName="quoteFormFirstName" id="quoteFormFirstName" class="textbox" type="text" />
    <span class="tick-area"></span>
    <div class="error" *ngIf="quoteFormFirstName.touched && quoteFormFirstName.invalid">
      <div *ngIf="quoteFormFirstName.errors.required">Your first name is required.</div>
      <div *ngIf="quoteFormFirstName.errors.minlength">Your first name must be more than {{ quoteFormFirstName.errors.minlength.requiredLength }} characters.</div>
    </div>
  </div>
</div>
<aside class="help">
  <p>Don’t worry, your personal information is important to us and we’ll never sell your details on to other companies.
    We will only pass them on to our business partners for the purposes of fulfilling your quote.</p>
</aside>
</fieldset>

<!-- SURNAME -->
<fieldset class="help-hover">
<div class="question-wrapper">
  <label class="question" for="quoteFormSurname">Surname</label>
  <div class="answer">
    <input formControlName="quoteFormSurname" id="quoteFormSurname" class="textbox" type="text" />
    <span class="tick-area"></span>
    <div class="error" *ngIf="quoteFormSurname.touched && quoteFormSurname.invalid">
      <div *ngIf="quoteFormSurname.errors.required">Your surname is required.</div>
      <div *ngIf="quoteFormSurname.errors.minlength">Your surname must be more than {{ quoteFormSurname.errors.minlength.requiredLength }} characters.</div>
    </div>
  </div>
</div>
<aside class="help">
  <p>Don’t worry, your personal information is important to us and we’ll never sell your details on to other companies.
    We will only pass them on to our business partners for the purposes of fulfilling your quote.</p>
</aside>
</fieldset>

<button class="button-primary float-right"
 [disabled]="!quote.valid">Submit</button>

 <p>You have {{ x }} amount of questions remaining</p>

 </form>

Answer 1

我看到您的所有字段都有某种验证，这意味着我们可以在开始计算所有字段并将无效字段的初始值设置为您拥有的属性数量。

你可以做的是订阅表单的valueChanges，迭代属性（表单控件）并检查表单控件的errors属性是否有内容。如果有，它将有一个带有错误的对象，如果没有，errors 将是null。然后，我们可以在迭代中增加您用于显示无效字段数量的属性。因此，这适用于带有表单控件（您似乎拥有）的单个表单组。这是给您的示例，只需将其应用于您的代码：

myForm: FormGroup;

numOfNotValidFields: number; // property to count invalid fields

constructor(private fb: FormBuilder) {
  this.myForm = this.fb.group({
    first_name: ['', [Validators.required, Validators.minLength(2)]],
    last_name: ['', [Validators.required]]
  });

  // get amount of properties initially, meaning all are invalid
  this.numOfNotValidFields = Object.keys(this.myForm.controls).length;

  this.myForm.valueChanges.subscribe(() => {
    // (re)initialize variable
    this.numOfNotValidFields = 0;
    // iterate the form object properties
    for(let prop in this.myForm.controls) {
      if(this.myForm.controls[prop].errors) {
        this.numOfNotValidFields++;
      }
    }
  });
}

Here's DEMO