“formGroup” form not submitting and validations not working

Question

I have a [formGroup] form in my Angular Component which uses ControlMessages to display error before submitting the form. But neither my "required" validation errors are appearing nor my input is changing state from being disabled. I want the required error to display when I leave a field empty.

COMPONENT.HTML

                     <form [formGroup]="ipForm" (submit)="ipSubmit()">
                                <div class="row">
                                        <div class="col-8">
                                                <input id="batchno" type="text"  name="batchno" placeholder="Batch No. *" value="" />
                                                <app-control-messages [control]="ipForm.get('batchno')"></app-control-messages>
                                        </div>
                                        <div class="col-4">
                                                <button (click)="curScan('batch','tip')" class="scan-btn">SCAN <i class="fa fa-camera"></i></button>
                                        </div>
                                </div>
                                <div class="row">
                                        <div class="col-12">
                                        <label class="checklabel">Direct Issue to Production
                                                <input type="checkbox">
                                                <span class="checkmark"></span>
                                        </label>
                                        </div>
                                </div>
                                <div class="row">
                                        <div class="col-12">
                                                <input type="text" id="header" name="header" placeholder="Header *" required>
                                                <app-control-messages [control]="ipForm.get('header')"></app-control-messages>
                                        </div>
                                </div>
                                <div class="row">
                                        <div class="col-12">
                                            <select name="fstorageloc" id="fstorageloc">
                                                <option selected disabled hidden>From Storage Location *</option>
                                                <option>Delhi</option>
                                            </select>
                                            <app-control-messages [control]="ipForm.get('fstorageloc')"></app-control-messages>
                                        </div>
                                </div>
                                <div class="row" style="margin-top: 3px;">
                                        <div class="col-12">
                                            <select name="tstorageloc" id="tstorageloc">
                                                <option selected disabled hidden>To Storage Location *</option>
                                                <option>Gurgaon</option>
                                            </select>
                                            <app-control-messages [control]="ipForm.get('tstorageloc')"></app-control-messages>
                                        </div>
                                </div>
                                <div class="row" style="margin-top: 3px;">
                                        <div class="col-12">
                                        <select name="dtype" id="dtype">
                                                <option selected disabled hidden>Select Damage Type *</option>
                                                <option>Tear</option>
                                        </select>
                                        <app-control-messages [control]="ipForm.get('dtype')"></app-control-messages>
                                        </div>
                                </div>
                                <div class="row" style="margin-top: 3px;">
                                        <div class="col-12">
                                        <select name="dod" id="dod">
                                                <option selected disabled hidden>Select Depth of Damage *</option>
                                                <option>100</option>
                                        </select>
                                        <app-control-messages [control]="ipForm.get('dod')"></app-control-messages>
                                        </div>
                                </div>
                                <div class="row">
                                        <div class="col-6">
                                                <button type="button" class="reset-btn" (click)="ipForm.reset()">Reset</button>
                                        </div>
                                        <div class="col-6">
                                                <input type="submit" value="Submit" [disabled]="!ipForm.valid">
                                        </div>    
                                </div> 
                        </form>

COMPONENT.TS

import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { ValidationService } from './../services/validation.service';

@Component({
  selector: 'app-transfer',
  templateUrl: './transfer.component.html',
  styleUrls: ['./transfer.component.css']
})
export class TransferComponent implements OnInit {
  ipForm: any;
  constructor(private router: Router, private formBuilder: FormBuilder) { 
    this.ipForm = this.formBuilder.group({
      batchno: ['', Validators.required],
      header: ['', Validators.required],
      fstorageloc: ['', Validators.required],
      tstorageloc: ['', Validators.required],
      dtype: ['', Validators.required],
      dod: ['', Validators.required]
    });

    console.log(this.ipForm);
  }
  ipSubmit() {
    if (this.ipForm.dirty && this.ipForm.valid) {
      alert(`Batch No: ${this.ipForm.value.batchno} Header: ${this.ipForm.value.header}`);
    }
  }
}

CONTROL-MESSAGES.COMPONENT.TS

import { Component, Input } from '@angular/core';
import { FormGroup, FormControl } from '@angular/forms';
import { ValidationService } from './../services/validation.service';

@Component({
  selector: 'app-control-messages',
  template: `<div *ngIf="errorMessage !== null">{{errorMessage}}</div>`
})
export class ControlMessagesComponent {

  @Input() control: FormControl;
  constructor() { }

  get errorMessage() {
    for (let propertyName in this.control.errors) {
      if (this.control.errors.hasOwnProperty(propertyName) && this.control.touched) {
        return ValidationService.getValidatorErrorMessage(propertyName, this.control.errors[propertyName]);
      }
    }

    return null;
  }

}

Answer 1

Use formControlName instead of name like below for all the rest form fields where that is required.

<input type="text" id="header" formControlName="header" placeholder="Header *" required>