The beast's angular Api learns, translates and understands-form. Formcontroller, Ngmodel.ngmodelcontroller

Source: Internet
Author: User

The beast's Ng API learns-form. Formcontroller, Ngmodel.ngmodelcontroller

Form. Formcontroller

Formcontroller tracks all of the forms he controls and nested, as well as their state, as if they were valid/invalid or dirty/raw.

Each form directive creates a Formcontroller instance.

Method:

$addControl ();

Register a controller for the form.

Input elements that use Ngmodelcontroller are automatically executed when the connection is made.

$removeControl ();

Unregisters a controller for the form.

Input elements that use Ngmodelcontroller are automatically executed at logoff.

$setValidity ();

Sets the validity of the form controller for the form.

This method will also propagate to the parent form.

$setDirty ();

Sets a dirty state for the form.

This method is called to add the class "Ng-dirty", which sets a dirty state for the form. This method is passed to the parent form.

$setPristine ();

Sets the form to its original state.

This method is called to delete the class "Ng-dirty", which sets the initial state for the form. This method is passed to the parent form.

Property:

$pristine

True if the user and the form have not yet interacted.

$dirty

True if the user and the form have interacted.

$valid

True if all tables and controllers are verified to be valid.

$invalid

True if at least one control or form validation is not valid.

$error

is a hash object that contains a controller or form that references an invalid.

Ngmodel.ngmodelcontroller

Ngmodel.ngmodelcontroller provides an API for the Ng-model directive. The controller contains data binding, validation, CSS Update Service, and value formatting and parsing. It clearly does not contain any logical processing, DOM rendering or listening events. This DOM-related logic should be provided by other data-binding directives that use Ngmodelcontroller.

Method:

$render ();

Called when the view needs to be updated.

$isEmpty (value);

This can be done when we need to determine if the value of input is empty. For example, if the value of input exists, then the instruction required to execute this function. The default $isempty function checks whether the value is "undefined", "", null, or Nan.

Value: Check the reference.

$setValidity (Validationerrorkey,isvalid);

Change the status of validity and notify the form when the controller's effectiveness changes. (If the validator is already marked as invalid, the form is not notified.) )

This method is called when validation is required---that is, the parser or the formatting function.

Validationerrorkey: Name of the validator. Validationerrorkey will be assigned to $error[validationerrorkey] =isvalid so that data binding can be done.

IsValid: Whether the current state is valid (true) or invalid (false).

$setPristine ();

Sets the state of the controller initialization.

$setViewValue (value);

Updates the value of the page.

This method is called when the value on the page changes.

Value: The values on the page.

Property:

$viewValue

The actual string value on the page.

$modelValue

The value that the controller binds in the model.

$parsers

Performs an array of functions as a controller to read values from the DOM pipe. Each function is called to pass the value to the next, and the last return value is used to populate the model. Used for purifying/converting or validating values. In order to verify, the parser should update the valid state with $setvalidity () and return an undefined invalid value.

$formatters

Performs an array of functions as a controller to read values from the DOM pipe. Each function is called to pass the value to the next, and the last return value is used to populate the model. Used to format/convert values displayed in the controller and validation.

$viewChangeListeners

An array of functions that are executed when the value on the page changes. It has no parameters to be executed and its return value is ignored. This can be used instead of additional monitoring of the model value.

$error

A hash object with all errors.

$pristine

True if the user has not yet interacted with the controller.

$dirty

True if the user has interacted with the controller.

$valid

True if there is no error.

$invalid

True if there is at least one error on the controller.

Using code:

<style>

Div[contenteditable] {border:1px solid black; background-color:white; min-height:24px; width:200px; margin-top:20px; }

. mydiv {float:left; display:block; margin-left:30px;}

</style>

<div ng-app= "Demo" >

<div ng-controller= "Democtrl" >

<div class= "Mydiv" >

<div contenteditable strip-br= "true" ng-model= "Usercontent" >hello world!</div>

</div>

<div class= "Mydiv" >

<textarea ng-model= "usercontent" style= "min-height:240px" ></textarea>

</div>

</div>

</div>

<script>

Angular.module (' Demo ', [' ngsanitize '])

. directive (' contenteditable ', [' $sce ', function ($SCE) {

return {

Restrict: ' A ',

Require: '? Ngmodel ',

Link:function (scope, element, Attrs, Ngmodel) {

if (!ngmodel) return;

Ngmodel. $render = function () {

Element.html ($sce. gettrustedhtml (ngmodel. $viewValue | | ‘‘));

};

Element.on (' Blur keyup change ', function () {

Scope. $apply (read);

});

Read ();

function Read () {

var html = element.html ();

if (attrs.stripbr && html = = ' <br> ') {

html = ';

}

Ngmodel. $setViewValue (HTML);

}

}

};

}])

. Controller ("Democtrl", ["$scope", function ($scope) {

}])

</script>

The above properties for Formcontroller can be used as a judgment for angular forms validation. For the following ngmodelcontroller, not much, but a few methods and properties in the instruction is very convenient to use, it feels like this operation is similar to the jquery operation.

The beast's angular Api learns, translates and understands-form. Formcontroller, Ngmodel.ngmodelcontroller

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.