0

I just learned about Angular forms and I managed to make a login one and a registration one from a tutorial, and those ones were easy enough. But now I want to make a form where not all the fields (table entries) need to be entered by the user, and I’m so new to this I don’t even know if it’s possible.

So, for example, let’s say I have built a social media app, and the user logs in and then makes a post of some kind. Naturally, the post would go in a separate database table from the users table, where the content of the post would be stored, but also who made it. So, if I can get the content of the post from what the user types in the form, how do I access information about the user before submitting the form? Or is it possible to “add” it after?

R. Richards
  • 24,603
  • 10
  • 64
  • 64
Andreea
  • 3
  • 2
  • I would give an example because your question is not so concrete: You would already have user information when you logged into the app. So i guess you can pass the user information to your form page, where you will show the user name in form. Now when you post the message, you would also pass on the user ID along with the post details so that post is saved under a certain user Id, which is referencing user table in DB. – kuldeep Aug 20 '21 at 21:41
  • Also it would be nice if you could paste here some code example that you did, ideally a plunker working example. If you want to check out how to pass information while navigating from one page to another , have a look https://stackoverflow.com/a/44865817/1398461 OR official docs on component communication https://angular.io/guide/component-interaction#!#bidirectional-service – kuldeep Aug 20 '21 at 21:45

1 Answers1

1

Everything is possible, and this in particular is actually fairly common to do.

To answer your question: At the point the user posts something he usually already logged in. When using a service for the scope of the whole application the information of the user is available when filling in the form.

  • You could either initialize the form with data using an initialization function for some (or all) of the fields.
  • You could fill in the data in the request when making the actual http call ( this is the better option).

It is quite easy to add more values to an object:

{ ...this.formData, ...this.additionalData }

Some more hints:

  • You might want to populate certain forms (like edit forms) using a request to your back-end service in the onInit() method.
  • You can make fairly simple template driven forms, but if you want to make more complex, dynamic and testable forms you might want to look into 'reactive forms'.
  • If you only want to change certain values in a form in your typescript code, you can use .patchValue() on your form instead of .setValue(), which requires all the form fields.
  • I can recommend the courses by Deborah Kurata on forms.

I'm glad to address any more concrete questions you might have. Have fun learning angular, creating good and user friendly forms is a good skill to have.

H3AR7B3A7
  • 4,366
  • 2
  • 14
  • 37
  • Thank you so much for taking your time to answer and for all this information! I’m pretty sure I get it now and I’ll go check in a bit. Thank you again!! – Andreea Aug 21 '21 at 17:18
  • Hey @H3AR7B3A7 I actually have one more question if you don’t mind! And it’s about what you’ve helped me with last time. I tried to do as you said; in the function attached to the “submit” button of the form, before making the http call, I tried setting one of the object's fields (a number) that wasn't in the form, but after checking in the database, the entry is always 0. I tried to do this in a few different ways, but it’s always just 0. What’s weird is that if I do a console.log of that object's field, it shows up as it is supposed to, not 0. Still, it’s saved as 0 in the db. – Andreea Aug 23 '21 at 18:04
  • If you create your project on [Stackblitz](https://stackblitz.com/) it is more easy for us to help you with what is going wrong. I cld take a look at yr code. That said, you might want to try set the values in the onInit of the component that holds the form. E.g.: If this is your data you are merging in your func bound to the submit button: 'const p = { ...this.product, ...this.productForm.value }; ' Try setting the values of this.product when the component is created if possible. This way you are certain they are set before you submit. There are other solutions depending on the situation. – H3AR7B3A7 Aug 23 '21 at 21:00