Basic Forms

[vc_row full_width=”stretch_row” equal_height=”yes” bg_type=”bg_color” bg_override=”ex-full” bg_color_value=”#f3f6f9″ css=”.vc_custom_1588427211229{padding-top: 20px !important;padding-bottom: 20px !important;}”][vc_column][vc_row_inner][vc_column_inner][vc_column_text]Today, we are starting with Case Start page. With this, we are starting with a basic form. Tomorrow, we can delve into a complex form.

Since we are using Angular for this project, Let’s dig into core components of Angular Forms.

We used FormGroup, FormControl and FormArray. These are the three main pillars of Angular Forms. FormGroup aggregates the values of FormControl into one object, with each control name as the key. If any of the controls in the group is invalid, the entire group becomes invalid.

Here is a screenshot of the Case Start page along with validation errors.

 

[/vc_column_text][vc_column_text]

At BundleN, we experiment with stack combinations on our own time.
For potential clients interested in this stack, we can always give a demo of what we have up until that point of time. You can reach us at sales@BundleN.com

For more details on this stack, click here

Here is the latest about our Angular + Java project.[/vc_column_text][/vc_column_inner][/vc_row_inner][vc_row_inner equal_height=”yes” gap=”10″ css=”.vc_custom_1581938564294{padding-right: 15px !important;padding-left: 15px !important;}”][vc_column_inner el_class=”features” width=”1/2″][bsf-info-box icon=”dt-icon-the7-misc-017″ icon_size=”70″ icon_color=”#552c11″ title=”Roles API End Point” pos=”left” title_font_style=”font-weight:bold;” css_info_box=”.vc_custom_1589855733508{padding-top: 30px !important;}”]Task
Backend API End Point for managing roles

Task Details
Develop backend API to assign roles to users. Due to the time crunch, we are skipping the UI to manage roles for now. We will use Postman to assign roles for the time being.[/bsf-info-box][/vc_column_inner][vc_column_inner el_class=”features” width=”1/2″][bsf-info-box icon=”dt-icon-the7-misc-017″ icon_size=”70″ icon_color=”#552c11″ title=”Basic Forms” pos=”left” title_font_style=”font-weight:bold;” css_info_box=”.vc_custom_1589855976691{padding-top: 30px !important;}”]Task
Develop case start page

Task Details
Develop a basic case start page with Case Type and Zip code as 2 input fields.

  • Make both the fields as mandatory fields
  • Perform valid Zip code validation against the zip code field
  • Develop backend end point to process the payload
  • Develop a microservice to initiate a case

[/bsf-info-box][/vc_column_inner][/vc_row_inner][vc_row_inner equal_height=”yes” gap=”10″ css=”.vc_custom_1581938591262{padding-right: 15px !important;padding-left: 15px !important;}”][vc_column_inner el_class=”features” width=”1/2″][bsf-info-box icon=”dt-icon-the7-misc-017″ icon_size=”70″ icon_color=”#552c11″ title=”What are we cooking today?” pos=”left” title_font_style=”font-weight:bold;” css_info_box=”.vc_custom_1589856043906{padding-top: 30px !important;}”]Complex Form

We will be adding a complex UI form and backend API to process the payload.[/bsf-info-box][/vc_column_inner][vc_column_inner el_class=”features” width=”1/2″][bsf-info-box icon=”icomoon-the7-font-the7-sort-02″ icon_size=”70″ icon_color=”#552c11″ title=”What’s next?” pos=”left” title_font_style=”font-weight:bold;” css_info_box=”.vc_custom_1589856060482{padding-top: 30px !important;}”]

  • Form Validation
  • Logs
  • Security
  • Social Login using Google
  • Social Login using Facebook

[/bsf-info-box][/vc_column_inner][/vc_row_inner][ultimate_spacer height=”48″ height_on_tabs=”24″ height_on_tabs_portrait=”32″ height_on_mob_landscape=”8″ height_on_mob=”16″][/vc_column][/vc_row][vc_row equal_height=”yes” bg_type=”image” parallax_style=”vcpb-default” bg_image_new=”id^73|url^https://dev.techreshape.com/marines/feb/atlas/wp-content/uploads/2020/01/contact-us124.png|caption^null|alt^null|title^contact-us124|description^null” bg_image_repeat=”no-repeat” bg_override=”ex-full” enable_overlay=”enable_overlay_value” overlay_color=”rgba(255,255,255,0.73)” css=”.vc_custom_1582001396087{padding-top: 35px !important;padding-bottom: 35px !important;}”][vc_column width=”5/12″][ultimate_heading main_heading=”Get In Touch” alignment=”left” main_heading_margin=”margin-bottom:20px;” main_heading_font_family=”font_family:Raleway|font_call:Raleway|variant:600″ main_heading_style=”font-weight:600;” main_heading_font_size=”desktop:40px;” main_heading_line_height=”desktop:50px;”][/ultimate_heading][bsf-info-box icon_type=”custom” icon_img=”id^51|url^https://bundlen.com/wp-content/uploads/2020/02/phone1.png|caption^null|alt^null|title^phone1|description^null” img_width=”55″ hover_effect=”style_2″ pos=”left”](615) 619-3000[/bsf-info-box][bsf-info-box icon_type=”custom” icon_img=”id^49|url^https://bundlen.com/wp-content/uploads/2020/02/email1.png|caption^null|alt^null|title^email1|description^null” img_width=”55″ hover_effect=”style_2″ pos=”left”]sales@BundleN.com

[/bsf-info-box][bsf-info-box icon_type=”custom” icon_img=”id^27|url^https://bundlen.com/wp-content/uploads/2020/02/time-1.png|caption^null|alt^null|title^time (1)|description^null” img_width=”55″ hover_effect=”style_2″ pos=”left”]Monday to Friday 7:00 am – 5:00 pm CST[/bsf-info-box][/vc_column][vc_column width=”7/12″][ultimate_heading main_heading=”Send Message” alignment=”left” main_heading_margin=”margin-bottom:20px;” main_heading_font_family=”font_family:Raleway|font_call:Raleway|variant:600″ main_heading_style=”font-weight:600;” main_heading_font_size=”desktop:40px;” main_heading_line_height=”desktop:50px;”][/ultimate_heading][contact-form-7 id=”117″][/vc_column][/vc_row]