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:
<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
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:
>Solution :
Ah so it’s the Angular 13 change – I still haven’t run into that difference 🙂 Anyway, instead of:
<mat-error *ngIf="projectForm.controls.title.errors?.required">
and
<mat-error *ngIf="projectForm.controls.title.errors?.minLength">
you now have to do:
<mat-error *ngIf="projectForm.controls['title'].errors?.['required']">
and
<mat-error *ngIf="projectForm.controls['title'].errors?.['minLength']">