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

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

1 个答案: