AFrameJS - Javascript MVC Library - API: AFrame → AFrame.Field class

class AFrame.Field class extends AFrame.Display

The base class for a field. A field is a basic unit for a form. With the new HTML5 spec, each form field has an invalid event. Some browsers display an error message whenever the invalid event is triggered. If default browser error message handling is desired, set AFrame.Field.cancelInvalid = false. If cancelInvalid is set to true, the invalid event will have its default action prevented. Field validation is taken care of through the FieldPluginValidation. All Fields will have a FieldPluginValidation created for them unless one is already created and attached as a plugin. To override the default validation for a field, subclass FieldPluginValidation and attach the subclass as a plugin on field creation.

A working example is found on JSFiddle

<input type="number" id="numberInput" />

---------

var field = AFrame.Field.create( {
    target: '#numberInput'
} );

// Set the value of the field, it is now displaying 3.1415
field.set(3.1415);

// The field is cleared, displays nothing
field.clear();

var val = field.get();

Constructor

Constructor	Parameters	Returns
`AFrame.Field( )`

Methods

Methods	Returns	Description
`clear( )`	`void`	↑ Clear the field. A reset after this will cause the field to go back to the blank state. `nameField.clear();`
`display( val )`	`void`	↑ Display a value, does not affect the reset value. Using this function can be useful to change how a piece of data is visually represented on the screen. `nameField.display( 'AFrame' );` Parameters: `val <variant>` value to dipslay
`get( )`	`variant`	↑ Get the value of the field. This should be overridden by subclasses to convert field string values to whatever native value that is expected. This means, the value returned by get can be different if the visual representation is different from the underlying data. Returns an empty string if no value entered. `var val = nameField.get();` Returns: `<variant>` the value of the field
`getDisplayed( )`	`void`	↑ Get the value that is displayed in the field. This can be different from what get returns if the visual representation of the data is different from the data itself. `var displayed = nameField.getDisplayed(); console.log( 'displayedValue: ' + displayed );`
`reset( )`	`void`	↑ Reset the field to its last 'set' value. `nameField.reset();`
`save( )`	`void`	↑ Save the current value as a reset point `nameField.save();`
`set( val )`	`void`	↑ Set the value of the field and display the value. Sets the rest value to the value entered. `nameField.set( 'AFrame' );` Parameters: `val <variant>` value to display

Methods inherited from AFrame.ObservablesMixin

Methods	Notes
`bindEvent`	↑
`bindTo`	↑
`getEventObject`	↑
`isEventTriggered`	↑
`proxyEvents`	↑
`setEventData`	↑
`triggerEvent`	↑
`unbindAll`	↑
`unbindEvent`	↑
`unbindTo`	↑
`unbindToAll`	↑

Methods inherited from AFrame.AObject

Methods	Notes
`addChild`	↑
`bindEvents`	↑
`getCID`	↑
`getConfig`	↑
`init`	↑
`removeChild`	↑
`teardown`	↑
`triggerProxy`	↑

Methods inherited from AFrame.Display

Methods	Notes
`bindClick`	↑
`bindDOMEvent`	↑
`getDOMElement`	↑
`getTarget`	↑
`render`	↑
`unbindDOMEvent`	↑

Events

Events Description

Events	Description
`onChange( fieldVal )`	↑ triggered whenever the field value changes Parameters: `fieldVal <string>` the current field value.


                          onChange(
                          fieldVal
                          )

↑

triggered whenever the field value changes

Parameters:

fieldVal <string>
- the current field value.

Events inherited from AFrame.AObject

Events	Notes
`onInit`	↑
`onTeardown`	↑

Events inherited from AFrame.Display

Events	Notes
`onRender`	↑

Configuration Attributes inherited from AFrame.AObject

Attributes	Notes
`{cid} cid`	↑

Configuration Attributes inherited from AFrame.Display

Attributes	Notes
`target`	↑