Sharing Top Content from the Angular-sphere.

How to Build Nested Model-driven Forms in Angular 2 ― Scotch

  • Our Demo Application – Here’s what we’ll be building: – – A form to create a customer – Ability for a customer to add multiple addresses – – We’re going to split our app up into multiple implementations: – Part 1: Create the customer form – – Part 2: Move…
  • $ npm install @angular/forms –save – Here’s the module for our application app.module.ts: – // app.module.ts – – import { NgModule } from ‘@angular/core’; – import { BrowserModule } from { FormsModule, ReactiveFormsModule } from ‘@angular/forms’; – – import { AppComponent } from imports: [ BrowserModule, ReactiveFormsModule ], – declarations:…
  • // app.component.ts – – import { Component, OnInit } from ‘@angular/core’; – import { Validators, FormGroup, FormArray, FormBuilder } from ‘@angular/forms’; – import { Customer } from moduleId: module.id, – selector: ‘app-root’, – templateUrl: class AppComponent implements OnInit { – public myForm: FormGroup; // our form model – – //…
  • –postcode– – div – labelpostcode/label – input type=”text” formControlName=”postcode” – /div – div – /div – /div – button type=”submit” few notes here: – – formControlName directive: the form control name.
  • — app.component.html — – – div [formGroup]=”adressForm” – div class=”form-group col-xs-6″ – labelstreet/label – input type=”text” class=”form-control” formControlName=”street” – small class=”text-danger” – Street is required – /small – /div – div class=”form-group col-xs-6″ – labelpostcode/label – input type=”text” class=”form-control” formControlName=”postcode” – /div – /div – – … – Import address…

In this article, we will learn about how to build a nested model-driven form with validation using the latest forms module. If you are new to model-driven forms, please refer to How to Build Model-driven Forms in Angular 2 for a basic rundown.

With the Angular 2’s new forms module, we can build complex forms with even more intuitive syntax.

In this article, we will learn about how to build a nested model-driven form with validation using the latest forms module. If you are new to model-driven forms, please refer to How to Build Model-driven Forms in Angular 2 for a basic rundown.

What is a Nested Form?

Let’s say you have a product with a name and a price in your model. You want to create a form for it that allows a user to add a new product. But what if you want to add multiple products in the same form? How would we loop through each user model and validate it?

Nested forms allow us to handle multiple models in a single form.

Let’s dig a little deeper and see how we do it.

Our Demo Application

Here’s what we’ll be building:

A form to create a customer

Ability for a customer to add multiple addresses

We’re going to split our app up into multiple implementations:

Part 1: Create the customer form

Part 2: Move the group of controls to a new component

Introduction

We will build a…

How to Build Nested Model-driven Forms in Angular 2 ― Scotch

Comments are closed, but trackbacks and pingbacks are open.