1
Ich baue eine benutzerdefinierte Checkbox-Komponente, die eine echte input umschließt und es stilvoll aussehen lässt.Optional Attributbindung
Eine Voraussetzung für meine benutzerdefinierte Kontrollkästchen ist in der Lage, eine optional Name zu binden, so dass das Kontrollkästchen als Teil eines Formulars eingereicht werden kann.
@Component({
selector: 'my-checkbox'
template: `
<input type="checkbox" [name]="name">
`
/*, ...etc */
})
export class MyCheckbox implements ControlValueAccessor {
@Input() name: string;
// ...etc
}
Verbrauch:
<!-- named-->
<my-checkbox [(ngModel)]="vm" name="coolcool"></my-checkbox>
<!-- unnamed-->
<my-checkbox [(ngModel)]="vm"></my-checkbox>
Der Ausgang des genannten Beispiel sieht ganz gut
<!-- named output -->
<my-checkbox>
<input type="checkbox" name="coolcool">
</my-checkbox>
... aber der Ausgang des ungenannten Beispiel hat auch ein Namensattribut ?!
<!-- unnamed output -->
<my-checkbox>
<input type="checkbox" name="undefined">
</my-checkbox>
Wie mache ich name="undefined" weggehen?
Ich glaube, Angular etwas Magie tut, wenn Sie einen boolean '[disabled]' binden. Im einfachen html akzeptiert 'disabled' nicht 'true' oder' false', nur '" disabled "' oder eine leere Zeichenfolge. –
genau, aber wenn ich es in dieser Form verwendet: '' '[disabled] =" boolean? True: undefined "' '', es hat funktioniert. das beiseite, funktioniert nicht die Verwendung von * ngIf für Sie? – GHB
Es funktioniert wahrscheinlich wegen dieser Magie. Es wird wahrscheinlich nicht mit anderen Attributen funktionieren. Ich könnte ngIf verwenden, aber das ist nicht DRY-Code. In Wirklichkeit habe ich eine ganze Reihe anderer Attribute, die ich nicht wiederholen möchte. –