Question

我在html中有一个选择标签，如下所示：

<app-html-div>

在typeScript文件中，formControl的定义如下：

<div class="col-md-12">
          <div>
            <label for="advertisementType">Advertisement Type</label>
            <select formControlName="advertisementType" id="advertisementType" class="form-control advertisementType">
              <option value="-1" selected>Choose one...</option>
              <option *ngFor="let type of advertisementTypesValues" [value]="type">{{type}}</option>
            </select>
            <p *ngIf="advertisementType.errors['required']" class="advertisementTypeRequired">You must select one option/p>
          </div>
        </div>

isAdvertisementTypeRequiredValidator方法的位置是：

   this.advertisementType = new FormControl('', [this.isAdvertisementTypeRequiredValidator]);

我正在测试此选择控件，当我为其设置一个值时，它具有 valid 属性，该属性为false

  isAdvertisementTypeRequiredValidator(c: AbstractControl) {
    if (!c.parent || !c) {
      return;
    }
    const advertisementType = c.parent.get('advertisementType');
    if (advertisementType.value === '-1' || advertisementType.value === '') {
      return {required: true};
    } else {
      return {required: false};
    }

  }

然后日志显示：“ false”

方法验证是否存在问题？还是应该手动设置其他内容？

谢谢！

Answer 1

这是因为如果控件有效，则它应返回null作为有效性指示符，而不是whatever:false。验证者返回的Antything表示验证失败，因此控制无效。

与问题无关，但与验证程序本身无关：如果将验证程序放在目标控件上，则不必使用父表单再次获得该控件，因为AbstractControl c将是您的实际控件

角度-具有自定义验证器的无效选择类型

1 个答案: