Building a Full-stack Application Using the MEAN Stack/

...

/

Implementing Functionality to Add a New Course

Implementing Functionality to Add a New Course

Learn how to implement the functionality of adding a new course

We'll cover the following...

To implement the functionality to add a course, we’ll head over to the dashboard components of our application and follow the steps below:

Step 1: Setting up the FormBuilder

We start by heading to our create-course directory. We currently have the design implemented, but we’re yet to configure FormBuilder, FormGroup, and Validators. To do that, we’ll head over to the create-course.component.ts file and implement the code below:

Press + to interact
import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
@Component({
  selector: 'app-create-course',
  templateUrl: './create-course.component.html',
  styleUrls: ['./create-course.component.css'],
})
export class CreateCourseComponent implements OnInit {
  createForm!: FormGroup;
  constructor(private formBuilder: FormBuilder) {
    this.createForm = this.formBuilder.group({
      name: ['', Validators.required],
      isCompleted: ['', Validators.required],
      link: ['', Validators.required],
      platform: ['', Validators.required],
      description: ['', Validators.required],
    });
  }
  ngOnInit() {}
}

Below is a summary of the above code:

  1. We start by importing the FormBuilder, FormGroup, and Validators in line 2.
  2. Next, we create a createForm! variable in line 9. This variable holds the instance of the FormGroup. The exclamation mark at the end of the variable serves as an initializer to help prevent TypeScript errors.
  3. In line
...