Ich habe diesen HTML-Code, der richtig funktioniert hat:Angular 2 fortgeschrittene Einbindung
<div class="form-group"
[ngClass]="{'has-error': !control.valid && control.dirty, 'has-success': control.valid && control.dirty}">
<label class="col-sm-3 control-label">User:</label>
<div class="col-sm-9">
<input class="form-control" type="email" id="email"
minlength="5"
ngControl="email" #control="ngForm">
<span class="help-block" *ngIf="!control.valid && control.dirty">
este campo debe ser mayor que 5
</span>
</div>
</div>
Ich möchte eine Komponente wie folgt erstellen:
<control-validation>
<label>User:</label>
<input class="form-control" type="email" id="email"
minlength="5"
ngControl="email" #control="ngForm">
<error-messages>
<span class="help-block" *ngIf="!control.valid && control.dirty">
este campo debe ser mayor que 5
</span>
</error-messages>
</control-validation>
Ich habe ein Problem mit ngClass, die Richtlinie Eltern sollten wissen, was der Name der Eingangsreferenz ist. Wie kann ich die Eingabe auswählen und den Verweisnamen "#control" abrufen und in der übergeordneten Komponente verwenden, damit ngClass ordnungsgemäß funktioniert?
Ich akzeptiere alle anderen Lösungen, um eine Komponente zu erstellen, die jede Eingabevalidierung gemäß dieser CSS kapselt.
Fast fertig, nur noch ein Detail, ist es möglich, als eine Richtlinie den Namen Attribut angeben der Variable NgControlName? Ich meine: Weil ich nicht alle Eingaben mit #control – Serginho
nennen möchte Großartig! Tatsächlich ist die Feldkomponente in meiner Antwort ein Wrapper für nur ein Formularelement, das heißt, Sie können einen Parameter definieren für die Komponente, die @Input in der Komponentenklasse verwendet: "@Input() controlName: string;" Dann kannst du es wie folgt verwenden:
Schön, danke. Ich komme von der Arbeit mit eckigen 1.x und ich habe ein paar Probleme, Winkel 2 Referenzen zu unterschätzen (#name), Ihr Beispiel zu sehen, erkannte ich, dass Sie Referenzen auf Controller binden können, glaubte ich, dass eine Variable zu binden, ich ngModel verwenden musste . Ich meine, ich unterschätze nicht, was ist der Unterschied zwischen ngModel und Referenzen ... – Serginho