Skip to main content
100%

From.value will not show disabled controls so use getRawValue() ~ http://azanebrain.github.io/news/angular-snafoo-form-value-vs-getrawvalues/

✓ Published0🌍 Public
Aackuser
Last edited Jan 24, 2018
Created on Jul 23, 2018

This example demonstrates how Angular FormGroup’s `.value` property omits disabled controls, while `.getRawValue()` includes them. The code constructs a reactive form with one enabled control (`enabledControl`) and one disabled control (`disabledControl`), then logs both outputs to the console. Using `FormBuilder.group`, it shows that `.value` returns only `{ enabledControl: 'hello' }`, whereas `.getRawValue()` returns both controls including the disabled one’s value (`'world'`). The example relies on Angular’s reactive forms APIs, specifically `FormGroup`, `FormBuilder`, and the two accessor methods.

AI-generated description

Similar vizzes

Loading thumbnail…

Gist 8420680

This example demonstrates a simple text-input binding pattern, showing a hard-coded value on the left that changes to an AngularJS two-way bound model on the right. The code uses AngularJS’s `ng-model` directive to connect an input field directly to a property on the current booking object, while the left input uses a static template expression with `{{ }}` that displays the same value without updating it. The transition highlights how `ng-model` enables live synchronization between the view and the underlying data model, whereas the plain interpolation only renders the initial value. No external visualization libraries are used; the example focuses on AngularJS’s data-binding mechanics.

Aandybak
49% match
Loading thumbnail…

Gist 3957869

This example demonstrates a simple form interaction that disables a text input field based on the selected operating system. The form contains a dropdown menu and a text field; choosing “MAC” disables the text input, while selecting “PC” re-enables it. The behavior is implemented with jQuery, using the `.change()` event handler and the `.attr()` and `.removeAttr()` methods to toggle the `disabled` attribute. The code relies on the Yii framework’s `registerCoreScript` method to load jQuery, and the form submits via POST, though no server-side processing is shown.

Aallyraza
48% match
Loading thumbnail…

Disable HTML form input autocomplete and autofill in React

This example shows how to prevent Chrome autofill and autocomplete on React input fields by manipulating the `autoComplete` attribute. It demonstrates two approaches: setting `autoComplete="disabled"` directly on the `input` element, and using an `onFocus` handler that calls `setAttribute` to force the attribute to "disabled" when React would otherwise render "off". The code uses React's synthetic event system and JSX syntax within a functional component, referencing Chromium’s form style documentation for alternatives like `new-password`.

MMonaiThang
48% match
Loading thumbnail…

Gist 155908

This example shows a form-based user creation interface where the browser’s HTML parser rearranges the submitted markup. The code uses a Processing.js script inside a `script` tag to define a canvas variable, but the actual rendered page moves the submit button outside the form and inserts a literal `0` inside the form element. The discrepancy arises from how the browser handles unclosed form tags and embedded scripts, resulting in a different DOM structure than the expected source. The form action points to `/users`, but the visible output contains no functional form controls.

XXXX
47% match
Loading thumbnail…

JS Bin

This example demonstrates how AngularJS 1.3’s one-time binding syntax (`::`) reduces the number of active watchers in a scope. It shows a live counter of watchers that updates every 100 milliseconds via `$interval`, while two sets of five value spans are conditionally rendered with `ng-if`. Clicking “Assign values” populates the values, and clicking “Stop Watching” switches the display to one-time bindings, causing the watcher count to drop. The code uses AngularJS’s `$scope`, `ng-click`, and `ng-init` to manage state and manually traverses the DOM to count watchers.

Aali-bugdayci
46% match
Loading thumbnail…

Phaser Form Interaction

This Phaser Form Interaction example demonstrates how an HTML form can update game properties without conflict from Phaser’s keyboard controls. The key mechanism is toggling Phaser’s `input.keyboard.enabled` and `globalCapture` state based on form focus, ensuring typing and arrow-key navigation work correctly. Upon submit, a listener calls public scene methods like `setGameSpeed` and `setPlayerName`, then blurs the input to return control to the game. The code uses `focusin`/`focusout` event delegation and a submit listener on the `<form>` element.

RRobinL
46% match
Loading thumbnail…

Gist 155981

The example compares expected and actual HTML output for a form-based user creation interface. It uses a raw HTML script tag with a JavaScript variable declaration (`int x_axis = 755`), though the syntax is not valid JavaScript. The visualization highlights a structural discrepancy: the expected output places the submit button inside a `<form>` with a POST action to `/users`, while the actual output moves the button outside the form and adds a stray text node containing "2". No external libraries or data sources are used; the comparison relies solely on static markup inspection.

XXXX
45% match
Loading thumbnail…

Gist 7699534

This example demonstrates a jQuery plugin for form validation, where input fields are checked against rules like presence, email format, and numeric ranges. Valid and invalid states trigger CSS classes (`pass`/`fail`) through event handlers. The implementation defines custom jQuery functions (`jQuery.fn.valid`, `jQuery.fn.validate`) that listen for events such as `focusout`, `keydown`, and `submit`, using the `jQuery(@).data()` API to track validity. The usage sample binds validators to elements with the class `form-control.required`, applying the declared callbacks for live feedback.

DDylanFM
45% match