Reactive forms in Angular Part 2

July 14, 2017

In the previous post we were left with the following template

	<form novalidate (ngSubmit)="submit(form.valid)" [formGroup]="form">
		 <input formControlName="name" type="text" />
        <span *ngIf="form.get('name').hasError('required') && form.get('name').touched">Enter Name </span>
        <div formArrayName="courses">
	        <div *ngFor="course of courses; index as i " formGroupName="">
	        		<div>
	        			<input formControlName="id" type="text" />
		    			<span class="error" *ngIf="!course?.required">Please enter the course id</span>
					</div>
	    		   <div>
	        			<input formControlName="name" type="text" />
	        			<span class="error" *ngIf="!course?.required">Please enter the course name</span>
	        		</div>
	        		<div>
	        			<button (click)="add" [disabled]="course.invalid"></button>
	        		</div>
	        </div>
	     </div>
	     <div formGroup="address">
	     		<input formControlName="address1" type="text" />
				<input formControlName="address2" type="text" />
	     </div>
	</form>

Breaking it down here are some of the importart things to note in the template.

We start with the [formGroup]="form" declaration at the top of the form,