Angular - Form validation

Question

I start in Angular, and I have an error that I can not solve on my application. I would like to check that my form is validated, that it is not empty. And if it is, the field would become red as with bootstrap.

Here is part of my code:

step-event.component.ts :

import { Component, OnInit, EventEmitter, Output } from '@angular/core';
import { ViewChild } from '@angular/core/src/metadata/di';

@Component({
  selector: 'app-step-event',
  templateUrl: './step-event.component.html',
  styleUrls: ['./step-event.component.css']
})
export class StepEventComponent implements OnInit {
  @Output() onNext = new EventEmitter<boolean>();
  event = ''
  constructor() { }

  ngOnInit() {
  }

  nStep() {
    if(this.event === ''){
      console.log("nonono");
      return;
    }
    console.log("event : OK");
    this.onNext.emit(true);
  }
}

step-event.component.html:

 <input id="event" name="event" type="text" #event>
<button (click)="nStep()">OK</button>

what I get with this code is that in the console I get the result : nonono

Thank you for your answers

Answer 1

Try importing ElementRef and ViewChild

import {Component, ElementRef, OnInit, ViewChild} from '@angular/core';

then declare it

@ViewChild('event') event: ElementRef;

Then access it

this.event.nativeElement.value

(meaning)

 nStep() {
    if(this.event.nativeElement.value === ''){
      console.log("nonono");
      return;
    }
    console.log("event : OK");
    this.onNext.emit(true);
  }

---

That said, I recommend creating an actual <form> and using forms built-in validation (i.e. template-driven or reactive)

Answer 2

Here is the code, without the Output (to explain it to you) :

import { Component, OnInit, EventEmitter, Output } from '@angular/core';
import { ViewChild } from '@angular/core/src/metadata/di';
import { FormControl, Validators } from '@angular/forms';


@Component({
  selector: 'app-step-event',
  template: `
    <input id="event" name="event" type="text" [formControl]="eventInput" [class.error]="eventInput.hasError('required')">

    <button (click)="nStep()">OK</button>
  `,
  styleUrls: ['./step-event.component.css']
})
export class StepEventComponent implements OnInit {

  eventInput = new FormControl('', [Validators.required]);

  constructor() { }

  ngOnInit() {
  }

  nStep() {
    if (!this.eventInput.value) {
      console.log("nonono");
      return;
    }
    console.log("event : OK");
  }
}

Let's start with the template :

<input id="event" name="event" type="text" [formControl]="eventInput" [class.error]="eventInput.hasError('required')">

As you can see, there is 2 things that I have and you don't :

• [formControl], that will bind your variable to your input;
• [class.error]="eventInput.hasError('required')", that will apply the error class to your input if there is no value in it.

Next, you have this :

eventInput = new FormControl('', [Validators.required]);

This line creates a FormControl with an empty value, and states that the value is required.

You can find all of this on the official documentation, I highly advise you to read it.

Answer 3

Why don't you instead do this:

<input name="event" [(ngModel)]="event">