Documentation
Forms
Every value control works with Angular's reactive and template-driven forms. This form binds each one with formControlName; the value, its validity and the disabled state round-trip through the controls.
Live form
settings.getRawValue()
{
"name": "Ada Lovelace",
"bio": "",
"updates": true,
"notifications": false,
"volume": [
40
],
"plan": "pro",
"view": "Week",
"framework": "Angular",
"disabled": false
}settings.html
<form [formGroup]="settings">
<input glassInput label="Name" formControlName="name" />
<textarea glassTextarea label="Bio" autoResize formControlName="bio"></textarea>
<glass-checkbox label="Email me updates" formControlName="updates" />
<button glassSwitch aria-label="Notifications" formControlName="notifications">
<span glassSwitchThumb></span>
</button>
<glass-slider aria-label="Volume" formControlName="volume" />
<glass-radio-group formControlName="plan">…</glass-radio-group>
<glass-segmented-control formControlName="view">…</glass-segmented-control>
<glass-select formControlName="framework">…</glass-select>
</form>