Angular 2 Tag Validierung nicht zu stoppen einreichen

Question

mit dem folgenden Code:

<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> 

Und der Brauch Teil:

<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> 

Das Problem wird auf die Schaltfläche Weiter sogar aktiviert immer, wenn die Postleitzahl nicht ausgefüllt ist . Nach meinem Verständnis sollte es funktionieren, aber nicht. Natürlich gibt es andere Elemente in der Form - diese verhindern den Button. Was vermisse ich?

In anderen Welten: Wie kann ich die beiden Komponenten miteinander kommunizieren lassen?

Answer 1

endlich herausgefunden, was los ist, war dies eine große Hilfe:

<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

Punkte feststellen zu: Reaktive, FormGroup, Validtor und FromBuilder.