Mitosis react-like textarea syntax does not work in angular

I am interested in helping provide a fix!

Yes

Which generators are impacted?

• All
• Angular
• HTML
• Qwik
• React
• React-Native
• Solid
• Stencil
• Svelte
• Vue
• Web components

Reproduction case

https://mitosis.builder.io/?outputTab=IYOw5grgNsBOQ%3D%3D%3D&code=JYWwDg9gTgLgBAbzgVwM4FMDKMCGN1wC%2BcAZlBCHAEQACARssADYAm6UAdMBAPQjAwIqYKioBuAFAT0AD0iw4bEjmRN4JZADsAxjG6a4AWQCeAYQqRN6TTAAUASkQS4cKOhjIoB285dwAPPgyuG44cABuOEzI6AC8AOT4qDDxcDwAfL72koRAA%3D%3D

Expected Behaviour

When using the react-like syntax to set the value of a textarea e.g

<textarea value='test' />

Mitosis converts this into the following angular code

<textarea value="test"></textarea>

Instead mitosis should convert this into one of the following syntaxes which works in angular.

<textarea [value]="'test'"></textarea>
<textarea [(ngModel)]="name"></textarea>

Actual Behaviour

<textarea value="test"></textarea>

does not show “test” inside the textarea in angular.

Additional Information

See stackblitz https://stackblitz.com/edit/angular-ivy-zar36q?file=src%2Fapp%2Fapp.component.html,src%2Fapp%2Fapp.component.ts

[chadalen]

Confused why this doesn’t work in Angular. Can you link to Angular docs that explain? isn’t <textarea value="test"></textarea> valid HTML?

From what I see in regular html the text goes between the opening and closing textarea tag. That tag doesn’t have a “value” attribute like input does.

<textarea>
  Content of the textarea.
</textarea>

https://www.w3schools.com/react/react_forms.asp “The textarea element in React is slightly different from ordinary HTML” “In HTML the value of a textarea was the text between the start tag <textarea> and the end tag </textarea>”

I did link a stackblitz that shows the problem. Though if you use property binding in angular with the value attribute it does work…

<textarea [value]="'test'"></textarea>

I’ll look around see if I can find any better docs though.

[samijaber]

Ok, we’d need to put together a list of how each framework handles textarea values to best decide what to do:

• React: value goes into value prop: https://svelte.dev/tutorial/textarea-inputs
• Angular: [value] or [(ngModel)]
• Svelte: bind:value https://svelte.dev/tutorial/textarea-inputs
• SolidJS: unsure
• Qwik: unsure
• Vue: it seems like we also have a :value binding here: https://vuejs.org/guide/essentials/forms.html

Once this list is complete we can figure out the best thing to do.

It does seem like textarea’s value is a special case in almost all modern web frameworks, so it might make the most sense to allow a value field in Mitosis types, and make sure to give it a special mapping in each framework as expected.