educative.io

Unable To Build Project After Making Reactive Form Validation Changes

Courses
,
#1

While building the project after making changes after this lession, I am getting the below error stack trace and so hence the project is not building up and not able to proceed. PFB

        [ngClass]="{ 'is-invalid': ccForm.get('name').errors }">
                                                        ~~~~~~

src/app/app.component.ts:6:16
6 templateUrl: ‘./app.component.html’,
~~~~~~~~~~~~~~~~~~~~~~
Error occurs in the template of component AppComponent.

Error: src/app/app.component.html:9:51 - error TS2531: Object is possibly ‘null’.

9 <ng-container *ngIf=“ccForm.get(‘name’).errors”>
~~~~~~

src/app/app.component.ts:6:16
6 templateUrl: ‘./app.component.html’,
~~~~~~~~~~~~~~~~~~~~~~
Error occurs in the template of component AppComponent.

Error: src/app/app.component.html:10:44 - error TS2531: Object is possibly ‘null’.

10 <div *ngIf=“ccForm.get(‘name’).errors.required” class=“invalid-feedback”>
~~~~~~

src/app/app.component.ts:6:16
6 templateUrl: ‘./app.component.html’,
~~~~~~~~~~~~~~~~~~~~~~
Error occurs in the template of component AppComponent.

Error: src/app/app.component.html:10:51 - error TS2531: Object is possibly ‘null’.

10 <div *ngIf=“ccForm.get(‘name’).errors.required” class=“invalid-feedback”>
~~~~~~~~

src/app/app.component.ts:6:16
6 templateUrl: ‘./app.component.html’,
~~~~~~~~~~~~~~~~~~~~~~
Error occurs in the template of component AppComponent.

Error: src/app/app.component.html:10:51 - error TS4111: Property ‘required’ comes from an index signature, so it must be accessed with [‘required’].

10 <div *ngIf=“ccForm.get(‘name’).errors.required” class=“invalid-feedback”>
~~~~~~~~

src/app/app.component.ts:6:16
6 templateUrl: ‘./app.component.html’,
~~~~~~~~~~~~~~~~~~~~~~
Error occurs in the template of component AppComponent.

Error: src/app/app.component.html:13:44 - error TS2531: Object is possibly ‘null’.

13 <div *ngIf=“ccForm.get(‘name’).errors.minlength” class=“invalid-feedback”>
~~~~~~

src/app/app.component.ts:6:16
6 templateUrl: ‘./app.component.html’,
~~~~~~~~~~~~~~~~~~~~~~
Error occurs in the template of component AppComponent.

Error: src/app/app.component.html:13:51 - error TS2531: Object is possibly ‘null’.

13 <div *ngIf=“ccForm.get(‘name’).errors.minlength” class=“invalid-feedback”>
~~~~~~~~~

src/app/app.component.ts:6:16
6 templateUrl: ‘./app.component.html’,
~~~~~~~~~~~~~~~~~~~~~~
Error occurs in the template of component AppComponent.

Error: 39msrc/app/app.component.html:13:51 - error TS4111: Property ‘minlength’ comes from an index signature, so it must be accessed with [‘minlength’].

13 <div *ngIf=“ccForm.get(‘name’).errors.minlength” class=“invalid-feedback”>
~~~~~~~~~

src/app/app.component.ts:6:16
6 templateUrl: ‘./app.component.html’,
~~~~~~~~~~~~~~~~~~~~~~
Error occurs in the template of component AppComponent.

Error: src/app/app.component.html:14:63 - error TS2531: Object is possibly ‘null’.

14 The value you inputted is {{ ccForm.get(‘name’).errors.minlength.actualLength }}
~~~~~~

src/app/app.component.ts:6:16
6 templateUrl: ‘./app.component.html’,
~~~~~~~~~~~~~~~~~~~~~~
Error occurs in the template of component AppComponent.

Error: src/app/app.component.html:14:70 - error TS2531: Object is possibly ‘null’.

14 The value you inputted is {{ ccForm.get(‘name’).errors.minlength.actualLength }}
~~~~~~~~~

src/app/app.component.ts:6:16
6 templateUrl: ‘./app.component.html’,
~~~~~~~~~~~~~~~~~~~~~~
Error occurs in the template of component AppComponent.

Error: src/app/app.component.html:14:70 - error TS4111: Property ‘minlength’ comes from an index signature, so it must be accessed with [‘minlength’].

14 The value you inputted is {{ ccForm.get(‘name’).errors.minlength.actualLength }}
~~~~~~~~~

src/app/app.component.ts:6:16
6 templateUrl: ‘./app.component.html’,
~~~~~~~~~~~~~~~~~~~~~~
Error occurs in the template of component AppComponent.

Error: src/app/app.component.html:16:57 - error TS2531: Object is possibly ‘null’.

16 It must be at least {{ ccForm.get(‘name’).errors.minlength.requiredLength }}
~~~~~~

src/app/app.component.ts:6:16
6 templateUrl: ‘./app.component.html’,
~~~~~~~~~~~~~~~~~~~~~~
Error occurs in the template of component AppComponent.

Error: src/app/app.component.html:16:64 - error TS2531: Object is possibly ‘null’.

16 It must be at least {{ ccForm.get(‘name’).errors.minlength.requiredLength }}
~~~~~~~~~

src/app/app.component.ts:6:16
6 templateUrl: ‘./app.component.html’,
~~~~~~~~~~~~~~~~~~~~~~
Error occurs in the template of component AppComponent.

Error: src/app/app.component.html:16:64 - error TS4111: Property ‘minlength’ comes from an index signature, so it must be accessed with [‘minlength’].

16 It must be at least {{ ccForm.get(‘name’).errors.minlength.requiredLength }}
~~~~~~~~~

src/app/app.component.ts:6:16
6 templateUrl: ‘./app.component.html’,
~~~~~~~~~~~~~~~~~~~~~~
Error occurs in the template of component AppComponent.

Please find versions of angular packages installed on local.

Package - Version

angular-devkit/architect - 0.1300.4
angular-devkit/build-angular - 13.0.4
angular-devkit/core - 13.0.4
angular-devkit/schematics - 13.0.4
angular/cli - 13.0.4
schematics/angular - 13.0.4
rxjs - 7.4.0
typescript - 4.4.4

Type your question above this line.

Course: https://www.educative.io/collection/5276698025132032/5689609708109824
Lesson: https://www.educative.io/collection/page/5276698025132032/5689609708109824/4852365237682176