Angular Form Validator Pattern: only letters and numbers

form-validation-pattern.component.ts

import { Component } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';

@Component({
    selector: 'form',
    templateUrl: './form.component.html',
    styleUrls: ['./form.component.scss']
})
export class Form {
   
    form: FormGroup;
    
    constructor(private fb: FormBuilder) { 
        this.form = this.fb.group({
            title: ['', [Validators.pattern('^[A-Za-z0-9ñÑáéíóúÁÉÍÓÚ ]+$')]
            ],
        });     
    }  
}

Fantastic, thank you.

Nice!

Its working, nice! How to add to 'title': Validators.required, ?

hi!

• import on your component
  import { FormBuilder, FormGroup, Validators } from '@angular/forms';

• setup on the view
  <input type="text" formControlName="title">

• set on your form builder element

this.form = this.fb.group({
            title: ['', [Validators.pattern('^[A-Za-z0-9ñÑáéíóúÁÉÍÓÚ ]+$')]
            ]

I was struggling with adding 'Validator.required' to existing one, but solved it eventually:
this.form = this.fb.group({
title: ['', [Validators.pattern('^[A-Za-z0-9ñÑáéíóúÁÉÍÓÚ ]+$'),
Validators.required]
]

Thanks, it was a good example...

What does this "9ñÑáéíóúÁÉÍÓÚ" part of the validator do?

It allows this special chars to be typed, required for spanish language.