显示 incompleted/invalid 表格的数量 fields/elements

Question

我需要显示填写表单时剩余的 incompleted/invalid 个表单域的数量。

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

我该怎么做？

我目前有一个经过验证的反应式表单。

任何帮助都会很棒。

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

显示 incompleted/invalid 表格的数量 fields/elements

Show the number of incompleted/invalid form fields/elements

angular

validation

angular-forms