Good evening everyone!

I'm having a few issues with Angular lately. I'm new to Angular, so I'm encountering lots of errors here and there. Thankfully, I've got this beautifully big community to bring some knowledge.

I'm on the stage of validating forms in Angular.

I'm trying to make a validation through the view (html file) and component (component file).

**These are the problems I'm having atm:**

---

* My field validations don't seem to work, as when I click the submit button of my form, it automatically skips any possible validation

---

* While I can't validate in the component, I cannot even make a custom validation inside the form with ngIf\* (I'm using a Material Design style library)

---

I've tried everything and couldn't make it to work.

These are my files:

**add-project.component.html**:

```html
<div class="new-project">
    <mat-toolbar>
        <span>New Project</span>
    </mat-toolbar>
    <form [formGroup]="projectForm" (ngSubmit)="onSubmit()">
    <mat-card>
        <mat-card-content>
            <p>
                <mat-form-field appearance="outline">
                    <mat-label>Title</mat-label>
                    <input formControlName="title" matInput required placeholder="Title">
                    <mat-error *ngIf="projectForm.title.required">Title is required</mat-error>
                </mat-form-field>
            </p>
            <p>
                <mat-form-field appearance="outline">
                    <mat-label>Description</mat-label>
                    <textarea rows="6" formControlName="description" matInput placeholder="Description"></textarea>
                </mat-form-field>
            </p>
            <p>
                <mat-form-field appearance="outline">
                    <mat-label>Access Code</mat-label>
                    <input id="accessCode" formControlName="accessCode" matInput placeholder="Access Code">
                </mat-form-field>
            </p>
        <!-- FORM CONTENT -->
        </mat-card-content>
        <mat-card-actions>
            <button mat-raised-button color="primary" type="submit">Create Project</button>
         <!-- REGISTER BUTTON -->
        </mat-card-actions>
    </mat-card>
    </form>
</div>
```

**add-project.component.ts**

```html
import { Project } from 'src/app/models/project.model';
import { ProjectService } from 'src/app/services/project.service';
import { FormGroup, FormControl, Validators, FormBuilder } from '@angular/forms';
import { Component, OnInit, NgZone } from '@angular/core';
import { Router } from '@angular/router';

@Component({
  selector: 'app-add-project',
  templateUrl: './add-project.component.html',
  styleUrls: ['./add-project.component.css']
})

export class AddProjectComponent implements OnInit {
  projectForm: FormGroup;

  constructor(
    public formBuilder: FormBuilder,
    private router: Router,
    private ngZone: NgZone,
    private project: ProjectService,
  ) { 
    this.projectForm = this.formBuilder.group({
      title: ['', [Validators.required, Validators.minLength(3)]],
      description: [''],
      accessCode: [''],
    })
  }
  ngOnInit() { }
  onSubmit(): any {
    if (this.projectForm.valid) {
        console.log('form submitted');
      } else {
        // validate all form fields

    this.project.create(this.projectForm.value)
    .subscribe(() => {
        console.log('User added successfully!')
        this.ngZone.run(() => this.router.navigateByUrl('/projects'))
      }, (err) => {
        console.log(err);
    });
  }
}
}
```

Can someone help me with these issues I'm having? I don't know what to do to continue, I've been blocked for a few days without resolving it.

Thank you very much guys!

Edit with @Misha Mashina comments (11/01/2022 21:46):

I'm getting this few errors now:

[![enter image description here](https://i.stack.imgur.com/vm7bz.png)](https://i.stack.imgur.com/vm7bz.png)