i have a template with multiple forms. Form A is inside form B. When i click submit button of form B, i don't want to validate form A. Form A should be validated with its own submit button.
<form #formB="ngForm">
<input name="input_one" />
<form #formA="ngForm"
<input name="input_two" />
<button type="submit"></button>
</form>
<button type="submit></button>
</form>
Thanks for your answers.
Best regards
html forms are not allowed to be nested, see Can you nest html forms?.
you can however use angular's FormGroup to have desired functionality.
see
I made a very simple example -> https://stackblitz.com/edit/angular-zuzzy1
If you click on the button with the label "group1" it will display the validity of only everything within the formgroup group 1
If you want to submit the contents/values formgroups on their own you'd have to implement that yourself (meaning, add a normal button, get the values of the form group and submit it manually)
But usually you have one model for one form and you'll submit the form as a whole.
Hope this answers the question.
UPDATE after comments
see -> https://stackblitz.com/edit/angular-djks4d?file=src%2Fapp%2Fapp.component.html
if you click on form B button it should always alert true no matter the state of the sub component/sub form.
the stackblitz has two possibilites.
hello.component and send the generated data to app.component via EventEmitter<form> tag because it wouldn't be valid html according to spec)Another possibility would be not to create a form for the data creation at all and handle everything manually (e.g. in a keyup event or similar)
Personally I would probably go with option 1 (the component) because than it's properly separated and reusable.
But both work.
input_one) Currently you have a child form control input_two with validation but it shouldn't validate if you validate its parent. This sounds like a rather odd design, because you want to have a valid entity while one of its children is invalid. What are you trying to achieve? maybe we can find a better solution.