4

我有一个表单，它根据下拉列表中的某些值更改其验证。如果选择了大学 A，则要求的最小百分比为 60，如果选择了大学 B，则最小百分比下降到 55。虽然我已经找到了一种方法来获取模板中的最小错误，这样我就不必费力了在我的模板中编码百分比值。虽然我不确定这是否是正确的方法。

<div formGroupName="marks">
  <div class="form-group">
    <label for="email" class="col-lg-3 control-label">Semester 1</label>
    <div class="col-lg-3">
      <input autocomplete="off"
             #sem1
             type="text"
             min="0"
             max="99"
             maxlength="1"
             maxlength="2"
             class="form-control"
             id="email"
             placeholder="Sem 1 (%)"
             (keypress)="onlyNumberKey($event)"
             formControlName="sem1">
      <span *ngIf="registrationForm.controls['marks'].controls['sem1'].hasError('required') &&
                   registrationForm.controls['marks'].controls['sem1'].touched"
                   class="text-danger">
        Sem 1 percentage required
      </span>
      <span *ngIf="registrationForm.controls['marks'].controls['sem1'].hasError('min') ||
                   registrationForm.controls['marks'].controls['sem1'].hasError('max') ||
                   registrationForm.controls['marks'].controls['sem1'].hasError('minlength')||
                   registrationForm.controls['marks'].controls['sem1'].hasError('maxlength') &&
                   registrationForm.controls['marks'].controls['sem1'].touched"
                   class="text-danger">
        Percenatge must be {{ registrationForm.get('marks.sem1')._errors.min.min }}  and above.
      </span>
    </div>
  </div>
</div>

零件 

registrationForm = new FormGroup({
  college: new FormControl('', [
    Validators.required, dropDrownValidator
  ]),
  marks: new FormGroup({
    sem1: new FormControl('',
      [
        Validators.required,
        Validators.min(60),
        Validators.max(99),
        Validators.minLength(1),
        Validators.maxLength(2)
      ]
    )
  })
});
4

1 回答 1

4

要实现你想要的，你必须观察你的college 控件的变化。

您可以(change)在模板中使用：

<select formControlName="college" (change)="handleChange($event.target.value)">
  ...
</select>

甚至valueChanges在组件中使用：

this.registrationForm.get('college').valueChanges.subscribe(college => this.handleChange(college));

在您的 中function，根据大学AbstractControl#setValidators用户的选择，您可以使用+ AbstractControl#updateValueAndValidity（申请）为您的验证器设置最小值，如下所示：

handleChange(selectedCollege: string): void {
  const min = selectedCollege === 'CollegeA' ? 60 : 55;
  const control = this.registrationForm.get('marks.sem1');
  control.setValidators([Validators.required, customMin(min)]);
  control.updateValueAndValidity();
}

提示：

1 - 由于您使用的是模型驱动的表单，因此您不应该在 HTML 中放置验证，保持它干净并将所有内容放在组件中。

2 - 您可以使用FormBuilder以简化构造form（参见底部的演示）。

3 - 你不应该像这样访问私有属性：

{{ registrationForm.get('marks.sem1')._errors.min.min }}

如果需要，只需使用errors而不是。_errors

4 - 您可以进一步简化您的标记：

代替：

<span *ngIf="registrationForm.controls['marks'].controls['sem1'].hasError('required') &&
             registrationForm.controls['marks'].controls['sem1'].touched" 
             class="text-danger">
  Sem 1 percentage required
</span>
<span *ngIf="registrationForm.controls['marks'].controls['sem1'].hasError('min') ||
             registrationForm.controls['marks'].controls['sem1'].hasError('max') ||
             registrationForm.controls['marks'].controls['sem1'].hasError('minlength')||
             registrationForm.controls['marks'].controls['sem1'].hasError('maxlength') &&
             registrationForm.controls['marks'].controls['sem1'].touched"
             class="text-danger">
  Percenatge must be {{ registrationForm.get('marks.sem1')._errors.min.min }}  and above.
</span>

你可以有：

<div class="text-danger" *ngIf="registrationForm.get('marks.sem1').touched">
  <span *ngIf="registrationForm.hasError('required', 'marks.sem1')">
    Sem 1 percentage required
  </span>
  <span *ngIf="registrationForm.getError('customMin', 'marks.sem1') as error">
    Percentage must be greater than or equal to {{ error.min }}.
  </span>
</div>

工作演示

于 2017-07-09T18:52:14.420 回答