Angular Forms In Depth Course

Author: jhades

README.md

@@ -3,6 +3,8 @@
 
 This repository contains the code of the [Angular Forms In Depth](https://angular-university.io/course/angular-forms-course) video course.
 
+This course repository is updated to Angular v11:
+
 ![Angular Forms In Depth](https://angular-university.s3-us-west-1.amazonaws.com/course-images/angular-forms-course-small.jpg)
 
 

package-lock.json

@@ -26,13 +26,14 @@
     "@angular/router": "11.0.0",
     "core-js": "^2.4.1",
     "express": "^4.16.2",
+    "express-fileupload": "^1.2.0",
     "moment": "^2.22.2",
     "rxjs": "6.5.4",
     "tslib": "^2.0.0",
     "zone.js": "~0.10.3"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "~0.1100.1",
+    "@angular-devkit/build-angular": "^0.1100.1",
     "@angular-devkit/schematics": "^11.0.1",
     "@angular/cli": "^11.0.1",
     "@angular/compiler-cli": "11.0.0",

package.json

@@ -0,0 +1,17 @@
+
+import {Request, Response} from 'express';
+
+
+export function onFileupload(req:Request, res: Response) {
+
+  let file = req['files'].thumbnail;
+
+  console.log("File uploaded: ", file.name);
+
+  setTimeout(() => {
+    res.status(200).json({message: 'File uploaded successfully.'});
+  }, 2000)
+
+
+
+}

server/file-upload.route.ts

@@ -5,10 +5,14 @@ import {Application} from "express";
 import {getAllCourses, getCourseById} from "./get-courses.route";
 import {searchLessons} from "./search-lessons.route";
 import {getCourseCategories} from './course-categories.route';
+import {onFileupload} from './file-upload.route';
+const fileUpload = require('express-fileupload');
 
 
 const app: Application = express();
 
+app.use(fileUpload());
+
 
 app.route('/api/courses').get(getAllCourses);
 
@@ -18,6 +22,8 @@ app.route('/api/lessons').get(searchLessons);
 
 app.route('/api/course-categories').get(getCourseCategories);
 
+app.route('/api/thumbnail-upload').post(onFileupload);
+
 
 const httpServer:any = app.listen(9000, () => {
     console.log("HTTP REST API Server running at http://localhost:" + httpServer.address().port);

server/server.ts

@@ -0,0 +1,4 @@
+
+.address-error {
+  color:red;
+}

src/app/address-form/address-form.component.html

@@ -0,0 +1,25 @@
+import {Component, Input, OnDestroy, OnInit} from '@angular/core';
+import {
+  AbstractControl,
+  ControlValueAccessor,
+  FormBuilder, FormGroup,
+  NG_VALIDATORS,
+  NG_VALUE_ACCESSOR,
+  Validator,
+  Validators
+} from '@angular/forms';
+import {noop, Subscription} from 'rxjs';
+
+@Component({
+  selector: 'address-form',
+  templateUrl: './address-form.component.html',
+  styleUrls: ['./address-form.component.scss']
+})
+export class AddressFormComponent {
+
+
+
+}
+
+
+

src/app/address-form/address-form.component.scss

@@ -1,5 +1,5 @@
 import {BrowserModule} from '@angular/platform-browser';
-import {NgModule} from '@angular/core';
+import {forwardRef, NgModule} from '@angular/core';
 
 import {AppRoutingModule} from './app-routing.module';
 import {AppComponent} from './app.component';
@@ -28,10 +28,19 @@ import {CoursesService} from "./services/courses.service";
 import {HttpClientModule} from "@angular/common/http";
 import {CourseResolver} from "./services/course.resolver";
 import { CourseDialogComponent } from './course-dialog/course-dialog.component';
-import {FormsModule, ReactiveFormsModule} from "@angular/forms";
-import {MatMomentDateModule} from "@angular/material-moment-adapter";
+import {FormsModule, ReactiveFormsModule} from '@angular/forms';
 import {LoginComponent} from './login/login.component';
 import { CreateCourseComponent } from './create-course/create-course.component';
+import {MatNativeDateModule} from '@angular/material/core';
+import {MatRadioModule} from '@angular/material/radio';
+import {MatCheckboxModule} from '@angular/material/checkbox';
+import {CreateCourseStep2Component} from './create-course/create-course-step-2/create-course-step-2.component';
+import {MatStepperModule} from '@angular/material/stepper';
+import { AddressFormComponent } from './address-form/address-form.component';
+import {CreateCourseStep3Component} from './create-course/create-course-step-3/create-course-step-3.component';
+import {CreateCourseStep1Component} from './create-course/create-course-step-1/create-course-step-1.component';
+import {FileUploadComponent} from './file-upload/file-upload.component';
+import {MatProgressBarModule} from '@angular/material/progress-bar';
 
 @NgModule({
     declarations: [
@@ -42,7 +51,12 @@ import { CreateCourseComponent } from './create-course/create-course.component';
         CoursesCardListComponent,
         CourseDialogComponent,
         LoginComponent,
-        CreateCourseComponent
+        CreateCourseComponent,
+        CreateCourseStep1Component,
+        CreateCourseStep2Component,
+        CreateCourseStep3Component,
+        AddressFormComponent,
+        FileUploadComponent
     ],
     imports: [
         BrowserModule,
@@ -65,7 +79,11 @@ import { CreateCourseComponent } from './create-course/create-course.component';
         AppRoutingModule,
         MatSelectModule,
         MatDatepickerModule,
-        MatMomentDateModule,
+        MatNativeDateModule,
+        MatRadioModule,
+        MatCheckboxModule,
+        MatStepperModule,
+        MatProgressBarModule,
         FormsModule,
         ReactiveFormsModule
     ],

src/app/address-form/address-form.component.ts

@@ -1,8 +1,7 @@
-import {Component, Inject, OnInit, ViewEncapsulation} from '@angular/core';
+import {Component, Inject, OnInit} from '@angular/core';
 import { MAT_DIALOG_DATA, MatDialogRef } from "@angular/material/dialog";
 import {Course} from "../model/course";
 import {FormBuilder, Validators, FormGroup} from "@angular/forms";
-import * as moment from 'moment';
 
 @Component({
     selector: 'course-dialog',
@@ -26,7 +25,7 @@ export class CourseDialogComponent implements OnInit {
         this.form = fb.group({
             description: [description, Validators.required],
             category: [category, Validators.required],
-            releasedAt: [moment(), Validators.required],
+            releasedAt: [new Date(), Validators.required],
             longDescription: [longDescription,Validators.required]
         });
 

src/app/app.module.ts

@@ -0,0 +1,5 @@
+
+
+textarea {
+  max-height: 20px;
+}

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

@@ -0,0 +1,18 @@
+import {Component, OnInit} from '@angular/core';
+import {FormBuilder, FormGroup, Validators} from '@angular/forms';
+import {CoursesService} from '../../services/courses.service';
+import {Observable} from 'rxjs';
+import {filter} from 'rxjs/operators';
+
+@Component({
+  selector: 'create-course-step-1',
+  templateUrl: './create-course-step-1.component.html',
+  styleUrls: ['./create-course-step-1.component.scss']
+})
+export class CreateCourseStep1Component implements OnInit {
+
+  ngOnInit() {
+
+  }
+
+}

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

@@ -0,0 +1,19 @@
+import {Component, OnInit} from '@angular/core';
+import {FormBuilder, FormGroup, Validators} from '@angular/forms';
+
+
+@Component({
+  selector: 'create-course-step-2',
+  templateUrl: 'create-course-step-2.component.html',
+  styleUrls: ['create-course-step-2.component.scss']
+})
+export class CreateCourseStep2Component implements OnInit {
+
+
+  ngOnInit() {
+
+
+
+  }
+
+}

src/app/create-course/create-course-step-1/create-course-step-1.component.scss

@@ -0,0 +1,16 @@
+
+.add-lessons-form {
+  margin-bottom: 40px;
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+
+}
+
+.lesson-form-row {
+  display: flex;
+
+  mat-form-field {
+    margin-right: 10px;
+  }
+}

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

@@ -0,0 +1,13 @@
+import {Component} from '@angular/core';
+import {FormArray, FormBuilder, FormGroup, Validators} from '@angular/forms';
+
+
+@Component({
+  selector: 'create-course-step-3',
+  templateUrl: 'create-course-step-3.component.html',
+  styleUrls: ['create-course-step-3.component.scss']
+})
+export class CreateCourseStep3Component {
+
+
+}

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

@@ -1,7 +1,6 @@
 
-<div class="create-course-panel">
+<div class="create-course-panel data-form">
 
   <h2 class="title">Create New Course</h2>
 
-
 </div>

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

@@ -0,0 +1,14 @@
+
+h2 {
+  font-family: "Roboto";
+}
+
+.data-form {
+  max-width: 600px;
+  margin: 0 auto;
+}
+
+
+.stepper-buttons button{
+  margin-right: 5px;
+}

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

@@ -1,15 +1,40 @@
 import { Component, OnInit } from '@angular/core';
+import {STEPPER_GLOBAL_OPTIONS} from '@angular/cdk/stepper';
+
+
+
 
 @Component({
   selector: 'create-course',
   templateUrl: './create-course.component.html',
-  styleUrls: ['./create-course.component.css']
+  styleUrls: ['./create-course.component.scss'],
+  providers: [{
+    provide: STEPPER_GLOBAL_OPTIONS, useValue: {showError: true}
+  }]
 })
 export class CreateCourseComponent implements OnInit {
 
-  constructor() { }
 
-  ngOnInit(): void {
+  constructor() {
+
+  }
+
+
+  ngOnInit() {
+
+
+
+  }
+
+
+  submit(step1, step2,step3) {
+
+    console.log("Step 1 form value", step1);
+
+    console.log("Step 2 form value", step2);
+
+    console.log("Step 3 form value", step3);
+
   }
 
 }

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

@@ -0,0 +1,2 @@
+
+

src/app/create-course/create-course-step-3/create-course-step-3.component.scss

@@ -0,0 +1,18 @@
+
+.file-input {
+  display: none;
+}
+
+.file-upload {
+display: flex;
+  align-items: flex-end;
+}
+
+.upload-btn {
+  margin-left: 10px;
+  margin-bottom:15px;
+}
+
+.progress-bar {
+  margin-bottom: 10px;
+}

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

@@ -0,0 +1,16 @@
+import {Component, Input} from '@angular/core';
+import {HttpClient, HttpEventType} from '@angular/common/http';
+import {catchError, finalize} from 'rxjs/operators';
+import {AbstractControl, ControlValueAccessor, NG_VALIDATORS, NG_VALUE_ACCESSOR, Validator} from '@angular/forms';
+import {noop, of} from 'rxjs';
+
+
+@Component({
+  selector: 'file-upload',
+  templateUrl: "file-upload.component.html",
+  styleUrls: ["file-upload.component.scss"]
+})
+export class FileUploadComponent {
+
+
+}

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

@@ -10,10 +10,6 @@
   flex-direction: column;
 }
 
-.form-val {
-  margin-top: 10px;
-}
-
 .test-input {
   border-bottom: 1px solid grey;
   margin-bottom: 10px;