2017-11-09 1 views
0

Ich benutze reaktive individuelle Steuerung:Angular Reactive Forms - wie umgebendes HTML-Tag entfernen?

<div customFormControl formControlName="old"></div> 

und in der Komponente ist meine Wähler wie folgt definiert:

selector: '[customFormControl]', 

Wie kann ich erreichen, dass die umgebende

<div class="ng-untouched ng-pristine ng-invalid" customformcontrol="" formcontrolname="old" ng-reflect-name="old" ...></div> 

weggeht?

+0

Gibt es einen Grund, warum Sie dieses Tag entfernen müssen? Wenn Angular ein Tag generiert, ist es normalerweise erforderlich, dass Angular funktioniert. –

+0

Entschuldigung für die späte Antwort, Ich wollte nur die extra Div aus dem Weg, damit ich die CSS-Klassen von der Komponente bekommen konnte. Es wurde versucht, es so zu machen, aber es wird ein Fehler ausgegeben: "Unerwartetes schließendes Tag 'customFormControl'. Es kann passieren, wenn das Tag bereits von einem anderen Tag geschlossen wurde." Ich sollte hinzufügen, dass, obwohl ich eine bestimmte Menge von xp mit Vorlagenformen habe, ich nur versuche, diese reaktiven Formen arbeiten zu lassen, und ich mache wahrscheinlich etwas falsch an anderer Stelle. Ich wünschte, es gäbe einige Dokumente dazu (benutzerdefinierte reaktive Komponenten erben). –

Antwort

0

Wenn Sie eine benutzerdefinierte Steueranweisung implementieren und die eckigen Steuerartefakte nicht im Weg sein möchten, verwenden Sie die Anweisung nicht mehr für dasselbe Element. So könnte man ändern, was Sie haben:

<div customFormControl formControlName="old"></div> 

Um so etwas wie:

<div [customFormControl]="old"></div> 

In Ihrer Richtlinie, werden Sie die Kontrolle erfassen @Input() wie folgt aus:

@Directive({ 
    selector: '[customFormControl]' 
}) 
export class FormControlDirective{ 
    @Input('customFormControl') control:FormControl; 
} 

Innerhalb Ihrer Richtlinie Klasse, haben Sie jetzt einen Verweis auf die Angular FormControl mit der control Eigenschaft

0

Wenn Sie das <div ...>-Tag entfernen möchten und nur ein <customFormControl ...>-Tag verwenden möchten, verwenden Sie einfach den Selektornamen der gewünschten Komponente.

<customFormControl formControlName="old"></custumFormControl> 

Sie werden nach wie vor die ng-unberührt, ng-pristine, etc Klassen und zusätzliche Attribute von Angular, aber die können sehr praktisch sein, verwenden, um die Formularvalidierung unter anderem haben.

Verwandte Themen