Develop Reference

React Hook Form - Smart Components - form broken when Inputs are wrapped in an element

Following the tutorial - https://www.react-hook-form.com/advanced-usage#SmartFormComponent) - works until the inputs are wrapped in an element. What changes would one need to make to the Form component to make this work?
<Form onSubmit={(data) => setData(data)}>
{/* wrapping the inputs breaks the form */}
<div>
<Input name="firstName" />
<Input name="lastName" />
</div>
<button>Submit</button>
</Form>
A hacky way out of this problem would be to create something like:
const InputWithDiv = props => (
<div>
<Input {...props} />
</div>
)
ref: https://stackoverflow.com/a/66215997/2102042
but this isn't a solution
👀 👉 example: https://codesandbox.io/s/react-hook-form-smart-form-component-forked-8o0f9?file=/src/index.js

I think you have to use FormContext here. There is also this discussion answered by the author of the library which recommends using FormContext for a scenario where your inputs are deeply nested. For example when using a <fieldset /> or a fragment or as in your case a <div />.
Here is the relevant section from the docs.

How to move the entered data from one html file to its ts file and then to another component file?

I generated two components login and home-page.I am trying to take user input from login template to login component and then to home-page template via home-page component. How do i do ?
I haven't write any code in any component file just in login template file.
Following is the login template code.
<form #loginForm="ngForm">
<label>Username:</label>
<input name="username" ngModel #name="ngModel" required minlength="4" maxlength="10" appForbiddenName="jedii" type="text">
<div *ngIf="name.touched && !name.valid">
<div *ngIf="name.errors.required">username is mandatory</div>
<div *ngIf="name.errors.minlength">username must be of min 4 characters</div>
<div *ngIf="name.errors.forbiddenName">username cannot be jedii</div>
</div>
<br><br>
<label>Password:</label>
<input type="password" name="password" ngModel #password="ngModel">
</form>
<br>
<button routerLink="/home">Login</button>
<br>
<br>
<button (click)="loginForm.resetForm()">Clear</button>

There are various possible ways to access user input data from html in ts file and pass data from one component to other.
To access data in ts from template file, you can use two different types of forms:
Template Driven (Click here for more details)
Reactive forms (Click here for more details)
To pass data from one component to other, possible methods are:(Click here for more details)
Pass data from parent to child with input binding
Intercept input property changes with a setter
Intercept input property changes with ngOnChanges()
Parent listens for child event
Parent interacts with child via local variable
Parent calls an #ViewChild()
Parent and children communicate via a service
In your case, I think best solution is to use Template driven forms and communication via service. Rest depends on your requirements.

https://angular.io/guide/component-interaction . You should check angular documentation before posting here. You can find everything about communication between components there. Cheers.

vue.js textbox disappears with v-model keyword

One day old vue.js programmer here. No experience with Javascript either. First time asking question on this forum.
Modifying someone else's code. Whenever I add v-model keyword, the control stops displaying.
Javscript
var layoutHeader = Vue.extend({
template: '#layout-header-tpl',
props: ['userinfo']
});
Html
This works, textbox is displayed (there is no v-model keyword)
<template id="layout-header-tpl">
<input type="text" class="form-control" placeholder="Search">
</template>
2) This does not work, textbox disappeares (added v-model keyword)
<template id="layout-header-tpl">
<input type="text" class="form-control" placeholder="Search" v-model="something1234">
</template>
3) This does not work, textbox disappeares (removed id from template)
<template>
<input type="text" class="form-control" placeholder="Search" v-model="something1234">
</template>
4) This works, textbox is displayed (commented out the template)
<!--<template>-->
<input type="text" class="form-control" placeholder="Search" v-model="something1234">
<!--</template>-->
Any idea what is going wrong?

You mentioned you are trying to reuse / modify someone else's code. I believe you are trying to do some kind of "inheritance" by using Vue.extend.
If so, please note that inheritance is not recommended. For details, here is the link to discussion topic: https://github.com/vuejs/Discussion/issues/354
That discussion was around Vue 1.0 version, but I believe it is still relevant for Vue 2.0.
As mentioned in that page, if you are working in a team and sharing code / components, then you may use mixins instead. You will find more details in the docs: http://vuejs.org/guide/mixins.html

Conflict between AngularJS and Thymeleaf

am a newbie to angularJS and Thymeleaf and am experiencing some weird conflict.
This is what I have below
<input type="text" th:field="*{unit}" value="{{unit.unitID}}" class="unit_value"/>
Whenever the template is resolved and displayed in the browser, the value is set to empty as in something like this
<input class="unit_value" type="text" value="" id="unit" name="unit" />
am not having the angularJS expression in the value anymore.
I know the expression is synonymous to that of thymeleaf, I really dont know how to solve this.
I have searched everywhere but cant get a solution.

The Solution I found is to literally bind the tag yourself and releave thymeleaf from binding it that is just put in the expected generated html that thymeleaf will generate
<input type="text" name="unit" value="{{unit.unitID}}" class="unit_value"/>
And everything works fine.

Error: [$compile:multidir] Multiple directives [form, form] asking for 'form' controller on: <form ng-form="">

I am getting this error on a form I am building in angularjs.
`Error: [$compile:multidir] Multiple directives [form, form] asking for 'form' controller on:
<div data-ng-controller="shortlistController">
<ul>
<li data-ng-repeat="job in jobs">
<div>{{ job.role }}</div><div>{{ job.salary }}</div><div>{{ job.company }}</div>
</li>
</ul>
</div>
<form ng-form>
<input type="text" ng-model="newRole">
<input type="text" ng-model="newSalary">
<input type="text" ng-model="newCompany">
<input type="text" ng-model="newUrl">
<button>Submit</button>
</form>
Initially I had the form within data-ng-controller, I took it out to see if the controller might have been the issue..
Please ask if you think I need to post more code, I am using angulars native routing system

Each of these is more or less identical and refers to the form directive:
<form></form>
<div form></div>
<div x-form></div>
<div data-form></div>
So you can do either <div form></div> or simply <form></form>, and in both cases they refer to the same form directive. But <form form></form> would be redundant.
The ngForm directive which you mention is actually an alias for the form directive above, and can be referenced using any of these:
<ng-form></ng-form>
<div ng-form></div>
<div x-ng-form></div>
<div data-ng-form></div>
So in your case, you were doing <form ng-form></form>, which is really the same as <form form></form>, which is why you're getting that error.
This page explains in more detail all the different ways to reference directives:
http://docs.angularjs.org/guide/directive
BTW, a benefit (sometimes) to using the <div ng-form></div> format is that you can do nested forms, whereas you can't do nested forms using just the <form> tag.

You don't need the ng-form if you're using <form> as it automatically is hooked up to the ng-form directive. You use either or, not both.

I encountered the same problem when I set my component name to form.
angular.module("testApp").component("form", {
...
});
Effect was the similar as in #user553086 answer. Change component's name solves the problem.