Angular Forms In Depth

Author: Your Name

src/app/create-course/create-course-step-2/create-course-step-2.component.html

@@ -0,0 +1,20 @@
+
+
+<div [formGroup]="form">
+
+    <mat-radio-group formControlName="courseType">
+
+        <mat-radio-button value="free">Free</mat-radio-button>
+
+        <mat-radio-button value="premium">Premium</mat-radio-button>
+
+    </mat-radio-group>
+
+
+</div>
+
+<div class="form-val">
+
+    {{form.value | json}}
+
+</div>

src/app/create-course/create-course-step-2/create-course-step-2.component.ts

@@ -9,6 +9,13 @@ import {FormBuilder, FormGroup, Validators} from '@angular/forms';
 })
 export class CreateCourseStep2Component implements OnInit {
 
+    form = this.fb.group({
+        courseType: ['premium', Validators.required]
+    });
+
+    constructor(private fb: FormBuilder) {
+
+    }
 
   ngOnInit() {
 

src/app/create-course/create-course.component.html

@@ -3,10 +3,10 @@
 
   <h2 class="title">Create New Course</h2>
 
-    <mat-horizontal-stepper [linear]="true"
+    <mat-horizontal-stepper [linear]="false"
                             class="mat-elevation-z5" labelPosition="bottom">
 
-        <mat-step [stepControl]="step1.form">
+        <mat-step [stepControl]="step1.form" errorMessage="Landing page in error">
 
             <ng-template matStepLabel>course landing page details</ng-template>
 
@@ -21,7 +21,7 @@ <h2 class="title">Create New Course</h2>
         </mat-step>
 
 
-        <mat-step>
+        <mat-step errorMessage="Pricing in error">
 
             <create-course-step-2></create-course-step-2>
 

src/app/create-course/create-course.component.ts

@@ -7,7 +7,12 @@ import {STEPPER_GLOBAL_OPTIONS} from '@angular/cdk/stepper';
 @Component({
   selector: 'create-course',
   templateUrl: './create-course.component.html',
-  styleUrls: ['./create-course.component.scss']
+  styleUrls: ['./create-course.component.scss'],
+  providers: [
+      {
+          provide: STEPPER_GLOBAL_OPTIONS, useValue: {showError:true}
+      }
+  ]
 })
 export class CreateCourseComponent implements OnInit {