Wie Formulargültigkeitsprüfung ohne <form> Tag in Angular2

Question

Ich frage mich, ob es eine Möglichkeit gibt, ein Formular in Angular 2 ohne die Verwendung des Tags form zu validieren? Zum Beispiel unten Ich möchte es ein Pflichtfeld kann

<div class="form-group"> 
    <label for="name">Name</label> 
    <input type="text" class="form-control" id="name"> 
</div> 
<button type="button" class="btn btn-default" (click)="save()">Save</button> 

Answer 1

Form-Steuerelemente Standalone werden, um (ohne übergeordnetes Formular), ob deklarative Form Kontrollen oder reaktive Form Kontrollen verwenden.

Für deklarative (mit ngModel) kann man einfach etwas tun, wie

<input #model="ngModel" [(ngModel)]="value" type="text" required/> 
<div *ngIf="model.invalid" style="color: red">Required</div> 

Für reaktive Formen Sie so etwas wie

<input [formControl]="control" [(ngModel)]="value" type="text"/> 
<div *ngIf="control.invalid" style="color: red">Required</div> 

// in component 
this.control = new FormControl('', [Validators.required]); 

Siehe Plunker

Weitere Informationen zur Verwendung von Angular tun können Formulare im Allgemeinen, siehe the docs/tutorial

Answer 2

Neben Formular-Steuerelemente direkt von der Verwendung als @peeskillet in seiner Antwort gezeigt hat, können Sie das Formular Richtlinie einen Tag mit seinen ngForm Wählern befestigen:

<div ngForm #newRuleForm="ngForm"> 
    <div class="form-group"> 
    <label for="name">Name</label> 
    <input type="text" class="form-control" id="name"> 
    </div> 
    <button type="button" class="btn btn-default" [disabled]="!newRuleForm.valid" (click)="save()">Save</button> 
</div> 

Denken Sie daran, dass Sie nicht Standard verwenden können Formular-Funktionalität wie <button type=submit> in diesem Fall, aber ich finde diesen Ansatz sehr nützlich, wenn ich Template-gesteuerte Formulare verwenden möchte, während eine einfache Möglichkeit, eine Gruppe von Feldern zusammen zu validieren.