Question

由于特殊要求，我需要验证打字稿代码中我delivery.address字段的存在，因此我要调用函数addressIsValid（）来执行此操作，如下面的代码所示。

<div class="col col-md-6 col-lg-12">
<input class="form-control" type="text" name="address" id="address" 
    [(ngModel)]="delivery.address" #address="ngModel">
    <ng-container *ngIf="delivery.method=='Delivery'">
        <div *ngIf="!addressIsValid()" class="primary-color">
            <!-- <div *ngIf="address.invalid && (address.dirty 
                || address.touched)" class="primary-color"> -->
            Address is required
            <!-- </div> -->
        </div>
    </ng-container>
</div>

打字稿功能：

public addressIsValid() {
    return !this.delivery.address == undefined 
        && !this.delivery.address == null;
  }

问题是在将有效值输入到字段后，错误消息：“需要地址”。不会消失。我该如何解决？

Answer 1

我认为问题出在您的addressIsValid函数中。

以这两个对象为例：

const o = { name: 'john' };
const o2 = { name: undefined };

!o.name-> false;
!o2.name-> true;

以上两项均不满足条件== undefined或== null。

因此，您将始终得到虚假的值。

您可以这样修改功能：

public addressIsValid() {
    return this.delivery.address !== undefined 
        && this.delivery.address !== null;
  }

Answer 2

您可能想检查一下：

public addressIsValid() {
    return !!this.delivery.address;
  }

example

如果不是这种情况，则需要在方法调用之后调试this.delivery实际包含的内容。

console.log(this.delivery)

告诉我们其中包含什么。

Answer 3

我建议阅读有关Angular Reactive Forms的内容。您可以轻松地在TypeScript中定义验证规则，并在视图中驱动错误消息的显示。

  this.heroForm = new FormGroup({
    'name': new FormControl(this.hero.name, [
      Validators.required,
      Validators.minLength(4),
      forbiddenNameValidator(/bob/i) // <-- Here's how you pass in the custom validator.
    ]),
    'alterEgo': new FormControl(this.hero.alterEgo),
    'power': new FormControl(this.hero.power, Validators.required)
  });

  <div *ngIf="name.errors.required">
    Name is required.
  </div>
  <div *ngIf="name.errors.minlength">
    Name must be at least 4 characters long.
  </div>
  <div *ngIf="name.errors.forbiddenName">
    Name cannot be Bob.
  </div>

还要看看FormBuilder service，这将有助于简化表单创建语法。

如何在Angular打字稿中而不是在表单中执行字段验证？

3 个答案: