Equivalent to react controlled-component

Feature Request

In React, the state be the “single source of truth” in controlled components

but there is no equivalent feature in angular

Relevant Package

@angular/form

Description

DEMO 1:

• in React

  https://stackblitz.com/edit/react-ts-kyqxmj?file=index.tsx

  type something in the input, and the input value won’t change, the state be the single source of truth

• in Angular

  https://stackblitz.com/edit/angular-ivy-sazmxc?file=src%2Fapp%2Fapp.component.ts

  type something in the input, and the input will change, the state won’t be the single source of truth

DEMO 2:

• in React

  click -> response -> true

  the view is always keeping the same as the state

  https://stackblitz.com/edit/react-ts-zaolxq?file=index.tsx

• in Angular

  click -> true(the checkbox's inner state has changed and not matched with the outer state) -> server response -> update the inner state to false

  the view is not follow the state when you click it.

  https://stackblitz.com/edit/angular-ivy-99wkuf?file=src%2Fapp%2Fapp.component.ts

Describe the solution you’d like

support changing the form components to use controlled mode or not controlled mode

adding an option to ngModelOptions to support this feature

such as [ngModelOptions]={controlled: true}

ref #5184

[waterplea]

[value] is a native property value binding and that’s what it does. It’s not in Angular, it’s in the DOM API 😃 You guys are literally asking for a one-liner to be added to the library. To simplify @petebacondarwin example, here’s the shortest form of this directive:

@Directive({
  selector: 'input[controlled][type="checkbox]',
  host: {
    '(input)': '$event.target.checked = !$event.target.checked'
  }
})
export class ControlledCheckbox {}

Besides being questionable UX, this would probably get you in some trouble from accessibility point of view. This is altering native browser behavior, or rather reverting it which is probably even worse because of Ctrl+Z, caret positioning etc if you would try to use it on something, other than checkboxes.

I would argue this doesn’t belong in the framework.

[petebacondarwin]

This can be achieved already in a couple of ways. For instance https://stackblitz.com/edit/angular-ivy-wtkqqx?file=src%2Fapp%2Fapp.component.ts

I am not sure that there needs to be any additional change to how Angular input event handling works.