type="text"
class="form-control is-valid"
id="4139c8f6-e922-4160-951d-bc94b6d67eb3"
model="some value"
>
$3
text
:model.sync="Hello"
/>
type="text"
class="form-control is-valid"
id="4139c8f6-e922-4160-951d-bc94b6d67eb3"
model="Hello"
>
date (Datepicker)
type="date"
:model.sync="23.09.1989"
/>
type="date"
class="form-control is-valid"
id="4139c8f6-e922-4160-951d-bc94b6d67eb3"
model="23-09.1989"
>
number
type="number"
:model.sync="123"
/>
type="date"
class="form-control is-valid"
id="4139c8f6-e922-4160-951d-bc94b6d67eb3"
model="123"
>
checkbox
type="checkbox"
:model.sync="male"
/>
type="checkbox"
class="form-control is-valid"
id="4139c8f6-e922-4160-951d-bc94b6d67eb3"
model="male"
>
textarea
type="textarea"
:model.sync="Some text content"
/>
class="form-control is-valid"
id="aed7eeed-4158-4e10-9e25-1d81b65e785c"
model="Some text content">
select
type="select"
:model.sync="beta"
>
Alpha
Beta
Charly
Alpha
Beta
Charly
$3
:label="'Name'"
:model.sync="name"
/>
Name:
type="text"
class="form-control is-valid"
id="4139c8f6-e922-4160-951d-bc94b6d67eb3"
model="some value"
>
$3
invalid = true
:model.sync="name"
/>
type="text"
class="form-control is-valid" <-- replaces .is-invalid with .is-valid
id="4139c8f6-e922-4160-951d-bc94b6d67eb3"
model="some value"
>
invalid=true
:model.sync="name"
:invalid="true
/>
type="text"
class="form-control is-invalid"
id="4139c8f6-e922-4160-951d-bc94b6d67eb3"
model="some value"
>
$3
Must be combined with invalid=false
:model.sync="name"
:invalid="name.length < 3"
:validFeedback="'Perfect!'"
/>
$3
Must be combined with :invalid=true
:model.sync="name"
:invalidFeedback="'Perfect!'"
:invalid="name.length < 3"
/>
$3
:model.sync="name"
:css = {
"background" : "red !important",
"padding": "1rem"
}
/>
type="text"
class="form-control is-valid"
id="4139c8f6-e922-4160-951d-bc94b6d67eb3"
model="some value"
style="background: red;"
>
$3
:model.sync="name"
:classes: "alpha, beta, charly delta"
/>
type="text"
class="form-control is-valid alpha beta charly delta"
id="4139c8f6-e922-4160-951d-bc94b6d67eb3"
model="some value"
>
$3
:model.sync="name"
:props:{
placeholder: "Placeholder text",
autocomplete: "off",
required: true,
name:"Sample
}
/>
type="text"
class="form-control is-valid"
id="4139c8f6-e922-4160-951d-bc94b6d67eb3"
model="some value"
placeholder="Placeholder text"
autocomplete="off"
required="required"
name="Sample"
>
$3
:model.sync="name"
:data = {
"name" : "fabrigeas",
"user": "{name: 'fabrice', 'age': '30'}"
}
/>
type="text"
class="form-control is-valid"
id="4139c8f6-e922-4160-951d-bc94b6d67eb3"
model="some value"
data-name="fabrigeas"
data-user="{"name":"fabrigeas","age":"30"}"
>
$3
Todo
* Migrate to typescrip
* Implement type=checkbox
* Implement other event types
* Reduce the size of css file by importing only required classes from bootstrap