Question

给出以下代码：

<form #theForm="ngForm" novalidate>
<div *ngIf="pickUpAddress.cannotVerify">
   <div class="form-group">
      <sh-manual-address [(ngModel)]="pickUpAddress" #manualAddress="ngModel" [address]="pickUpAddress" name="manualAddress"></sh-manual-address>
   </div>
</div>
</form>
<div>
    <button type="button" [disabled]="!theForm.control?.valid " (click)="navigateToConfirmation()">Continue</button>
</div>

自定义部分：

<ng-form name="manualAddress">
<div>
<div class="label">
      Postcode
    </div>
    <div class="input">
      <input ngControl="pickUpAddress.postcode" #postalcode="ngModel" [(ngModel)]="address.postcode" name="postcode" placeholder="Postcode"
        required/>
      <div *ngIf="postalcode.errors" class="input-error">Postcode is mandatory</div>
    </div>
  </div>
</ng-form>

问题是即使未填写邮政编码，“继续”按钮也会启用。根据我的理解，它应该有效，但不是。当然，表单中还有其他元素 - 这些元素阻止了按钮。我错过了什么？

在其他世界：我如何让两个组件相互交谈？

Answer 1

终于找到了正在发生的事情，这是一个很好的帮助：

<div [formGroup]="adressForm">
    <div class="form-group col-xs-6">
        <label>street</label>
        <input type="text" class="form-control" formControlName="street">
        <small [hidden]="adressForm.controls.street.valid" class="text-danger">
            Street is required
        </small>
    </div>
    <div class="form-group col-xs-6">
        <label>postcode</label>
        <input type="text" class="form-control" formControlName="postcode">
    </div>
</div>

http://plnkr.co/edit/clTbNP7MHBbBbrUp20vr?p=preview

注意事项：Reactive，FormGroup，Validtor和FromBuilder。

Angular 2标签验证不会停止提交

1 个答案: