MaterialFormComponent class

Upgrades mdl-form und does some validation checks.

The CSS-Class 'is-invalid' is set if not all requirement defined via HTML are met. The CSS-Class 'is-dirty' will be set the first time one of the input elements gets an "onChange" event

If MaterialFormComponent finds mdl-button--submit it enables/disables this element depending on the validation check.

 <form method="post" class="right mdl-form mdl-form-registration demo-registration">
     <h5 class="mdl-form__title">Register for launch</h5>
     <div class="mdl-form__content">
         <div class="mdl-textfield">
             <input class="mdl-textfield__input" type="text" id="sample1" required />
             <label class="mdl-textfield__label" for="sample1">Name</label>
             <span class="mdl-textfield__error">This field must not be empty</span>
         <div class="mdl-textfield">
             <input class="mdl-textfield__input" type="email" id="email" required />
             <label class="mdl-textfield__label" for="email">Email</label>
         <label class="mdl-checkbox mdl-js-checkbox mdl-ripple-effect" for="remember_me">
             <input type="checkbox" id="remember_me" class="mdl-checkbox__input" required />
             <span class="mdl-checkbox__label">Remember me</span>
     <div class="mdl-form__actions">
         <button class="mdl-button mdl-js-button mdl-button--submit mdl-button--raised
             mdl-button--primary mdl-ripple-effect" disabled>


MaterialFormComponent.fromElement(HtmlElement element, Container iocContainer)


isDirty ↔ bool
Will be set to true the first time one of the form-elements receives a onChange
read / write
isFormValidCallback IsFormValidCallback
Called by the framework as last resort before it enables/disables the submit-button
read / write
isValid → bool
Returns true if all requirements are fulfilled
onChange → Stream<FormChangedEvent>
If focus changes from one field to the other
attributes → Map<String, String>
read-only, inherited
classes CssClassSet
read-only, inherited
element Element
This is the element witch has the mdl-js- class
final, inherited
eventStreams → List<StreamSubscription>
Collects all the registered Events - helpful for downgrading an element Sample: eventStreams.add(input.onFocus.listen( _onFocus));
final, inherited
hashCode → int
The hash code for this object.
read-only, inherited
hub Element
Main element. If there is no child element like in mdl-button hub = button = element [...]
read-only, inherited
injector Container
final, inherited
onClick ElementStream<MouseEvent>
read-only, inherited
onInput ElementStream<Event>
read-only, inherited
parent MdlComponent
read-only, inherited
runtimeType → Type
A representation of the runtime type of the object.
read-only, inherited
visualDebugging ↔ bool
If an error occurs in the Component and {visualDebugging} is true a red border will be drawn around the Component {visualDebugging} is set in {_upgradeElement}
read / write, inherited


update() → void
Iterates through all MdlComponent in this form, checks if all the requirements are fulfilled (set via HTML) [...]
attached() → void
Called after DomRenderer has added this component to the DOM or if MdlComponentHandler hast upgrade the component and it's already in the DOM! [...]
cancelStream(StreamSubscription stream) → void
Helper for cancelling streams - checks for null
downgrade() → void
Cancels all the registered streams
noSuchMethod(Invocation invocation) → dynamic
Invoked when a non-existent method or property is accessed.
query(String selector, { bool logError: true }) Element
Searches for child of element based on the given selector [...]
toString() → String
Returns a string representation of this object.
waitForChild<T>(String selector, { Duration wait: const Duration(milliseconds: 100), int maxIterations: 10 }) → FutureOr<T>
Waits until the first descendant element of element that matches the specified selector is available. [...]


operator ==(dynamic other) → bool
The equality operator.

Static Methods

widget(HtmlElement element) MaterialFormComponent