0

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

AngularChan
  • 135
  • 2
  • 11
  • Thanks for the question! Please remember to include a [Minimal, Complete, and Verifiable example](https://stackoverflow.com/help/mcve). Such as what you've tried so far, what failed, what research you did. – Johan Rin Mar 10 '19 at 14:01

1 Answers1

1

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.

  • generate your data in a different component (hello.component and send the generated data to app.component via EventEmitter
  • just use a different form within Form B (note that I didn't use the <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.

Arikael
  • 1,989
  • 1
  • 23
  • 60
  • HI Arikael, thank you for your time. Your stackblitz example is empty. Can you give me a full example please. – AngularChan Mar 11 '19 at 05:34
  • Hi, sorry, I added the wrong link. It should now be fixed in my answer – Arikael Mar 11 '19 at 08:19
  • Hi, i've tried your solution. But if i submit form B. It still needs input_two to have a valid (required). How can i exclude it from validating? What i want to achieve is to have input_two inside form B, but without to be checked. – AngularChan Mar 11 '19 at 12:57
  • You can add a second FormGroup that consists of the rest of the form (in your case `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. – Arikael Mar 11 '19 at 21:01
  • I'm trying to create an input, which fills a div with values. Both the input and div are inside the form B. So i only need to validate the input when user wants to put the text inside the input to the list. By the way can you tell me how to add my own component inside the form and validate it too? – AngularChan Mar 12 '19 at 12:58
  • and the values filled into the div are part of form B respectively its model and need to be submitted when submitting form B? – Arikael Mar 12 '19 at 13:12
  • Yes. The list gets filled by the value of input_tow when submitting form A. Submitting form B validiates the list which is required to be set with at least one value. – AngularChan Mar 12 '19 at 13:16
  • Thanks. Your answer is correct. However when i add a required to input_one, formB still is valid, even when input_one has not a value. But when i add an ngModel to input_one, then formB show invalid. Can you explain why is that so? – AngularChan Mar 13 '19 at 09:14
  • no, I don't really know but I assume validation is used when a model binding is used. – Arikael Mar 15 '19 at 22:23