Angular Forms In Depth

Author: Your Name

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

@@ -10,6 +10,12 @@
 
     </mat-radio-group>
 
+    <mat-form-field>
+
+        <input type="number" matInput placeholder="Price" formControlName="price">
+
+    </mat-form-field>
+
 </div>
 
 <div class="form-val">

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

@@ -10,7 +10,13 @@ import {FormBuilder, FormGroup, Validators} from '@angular/forms';
 export class CreateCourseStep2Component implements OnInit {
 
     form = this.fb.group({
-        courseType: ['premium', Validators.required]
+        courseType: ['premium', Validators.required],
+        price: [null, [
+            Validators.required,
+            Validators.min(1),
+            Validators.max(9999),
+            Validators.pattern("[0-9]+")
+        ]]
     });
 
     constructor(private fb: FormBuilder) {
@@ -19,6 +25,20 @@ export class CreateCourseStep2Component implements OnInit {
 
   ngOnInit() {
 
+        this.form.valueChanges
+            .subscribe(val => {
+
+                const priceControl = this.form.controls["price"];
+
+                if (val.courseType == 'free' && priceControl.enabled) {
+                    priceControl.disable({emitEvent: false});
+                }
+                else if (val.courseType == 'premium' && priceControl.disabled) {
+                    priceControl.enable({emitEvent:false});
+                }
+
+            });
+
 
 
   }