Form-Validation not working properly Angular

Question

I want to add some form-validation for my Angular-Project. Sadly, when executing ng serve I run into the following error:

ERROR Error: Cannot find control with unspecified name attribute at _throwError (forms.js:2092) at setUpControl (forms.js:2000) at FormGroupDirective.push../node_modules/@angular/forms/fesm5/forms.js.FormGroupDirective.addControl (forms.js:4970) at FormControlName.push../node_modules/@angular/forms/fesm5/forms.js.FormControlName._setUpControl (forms.js:5573) at FormControlName.push../node_modules/@angular/forms/fesm5/forms.js.FormControlName.ngOnChanges (forms.js:5492) at checkAndUpdateDirectiveInline (core.js:20661) at checkAndUpdateNodeInline (core.js:21929) at checkAndUpdateNode (core.js:21891) at debugCheckAndUpdateNode (core.js:22525) at debugCheckDirectivesFn (core.js:22485)

Also, when I initialize all input-fields with "test" in my component, There is an outline around the whole form (red outline, like defined in .ng-invalid in my css) and not only around the inputs. Can someone relate to that?

I got the following setup:

In my .component.ts:

import { Component, OnInit } from '@angular/core';
import { LoggerService } from '../services/LoggingService/logger.service';
import { FormControl, FormGroup, Validators } from '@angular/forms';


@Component({
  selector: 'app-generator',
  templateUrl: './generator.component.html',
  styleUrls: ['./generator.component.css']
})
export class GeneratorComponent implements OnInit {

  private name: string;
  private person: string;
  private shortage: string;
  private id: string;
  private area: string;

  private form: FormGroup;
  private formControls = {};

  constructor(
    private logger : LoggerService
  ) { 
    let validators = [];

    //these three fields are required
    validators.push(Validators.required);
    this.formControls[this.name] = new FormControl(this.name, validators);
    this.formControls[this.id] = new FormControl(this.id, validators);
    this.formControls[this.area] = new FormControl(this.area, validators);
    //these field is required + no special chars are allowed
    validators.push(this.noSpecialChars);
    this.formControls[this.person] = new FormControl(this.person, validators);

    //this field is required + no special chars allowed + length=3
    validators.push(Validators.minLength(3));
    validators.push(Validators.maxLength(3));
    this.formControls[this.shortage] = new FormControl(this.shortage, validators);
    //add formControls to my form
    this.form = new FormGroup (this.formControls);
  }

  ngOnInit() {

  }

  cancelCreation() {
    this.logger.info("Cancelling")
  }

  submit() {
    this.logger.info("Submitting");
  }
  // dont accept special chars
  noSpecialChars( c: FormControl) {
    let REGEXP = new RegExp(/[~`!#$%\^&*+=\-\[\]\\';,/{}|\\":<>\?]/);

    return REGEXP.test(c.value) ? {
      validateId: {
        valid: false
      }
    } : null;
  }

}

my HTML:

<div class="total-div">
  <h1 id="headline">Headline</h1>  
  <hr>
  <form [formGroup]="form">
  <div class="block">
    <h2 class="subtitle">Info:</h2>
    <label>Name:</label>
    <input formControlName="{{name}}" placeholder="Name" class="outer-input"/> 
    <p>
    <label>Number:</label>
    <input formControlName="{{number}}" placeholder="Projektnummer"  class="outer-input"/> 
    </p>
    <p>
      <label>Area:</label>
      <input formControlName="{{area}}" placeholder="Area"  class="outer-input"/>
    </p>
    <hr class="sep">

    <h2 class="subtitle">Personal Info:</h2>

      <p>
        <label>Person:</label>
        <input formControlName="{{person}}" placeholder="person"  class="inner-input"/>
        <label>Shortage:</label>
        <input formControlName="{{shortage}}" placeholder="shortage" class="inner-input"/>
      </p>

    <hr class="sep">

    <button id="btn_create" (click)="submit()" [disabled]="!form.valid">Submit</button> <button id="btn_cancel" (click)="cancelCreation()">Cancel</button>
  </div>
  </form>
</div>

Maihan Nijat Maihan Nijat · Accepted Answer · 2018-12-05T20:24:19

Initialize these properties:

private name: string;
private person: string;
private shortage: string;
private area: string;

And use same values in the template to match.

AppComponent.ts

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

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {

  private name: string = 'name';
  private person: string = 'person';
  private shortage: string = 'shortage';
  private id: string = 'id';
  private area: string = 'area';

  private form: FormGroup;
  private formControls = {};

  constructor(
  ) { 
    let validators = [];

    //these three fields are required
    validators.push(Validators.required);
    this.formControls[this.name] = new FormControl(this.name, validators);
    this.formControls[this.id] = new FormControl(this.id, validators);
    this.formControls[this.area] = new FormControl(this.area, validators);
    //these field is required + no special chars are allowed
    validators.push(this.noSpecialChars);
    this.formControls[this.person] = new FormControl(this.person, validators);

    //this field is required + no special chars allowed + length=3
    validators.push(Validators.minLength(3));
    validators.push(Validators.maxLength(3));
    this.formControls[this.shortage] = new FormControl(this.shortage, validators);
    //add formControls to my form
    this.form = new FormGroup (this.formControls);
  }

  ngOnInit() {

  }

  cancelCreation() {
  }

  submit() {
  }
  // dont accept special chars
  noSpecialChars( c: FormControl) {
    let REGEXP = new RegExp(/[~`!#$%\^&*+=\-\[\]\\';,/{}|\\":<>\?]/);

    return REGEXP.test(c.value) ? {
      validateId: {
        valid: false
      }
    } : null;
  }
}

Template:

<div class="total-div">
  <h1 id="headline">Headline</h1>  
  <hr>
  <form [formGroup]="form">
  <div class="block">
    <h2 class="subtitle">Info:</h2>
    <label>Name:</label>
    <input formControlName="{{name}}" placeholder="Name" class="outer-input"/> 
    <p>
    <label>Number:</label>
    <input formControlName="{{id}}" placeholder="Projektnummer"  class="outer-input"/> 
    </p>
    <p>
      <label>Area:</label>
      <input formControlName="{{area}}" placeholder="Area"  class="outer-input"/>
    </p>
    <hr class="sep">

    <h2 class="subtitle">Personal Info:</h2>

      <p>
        <label>Person:</label>
        <input formControlName="{{person}}" placeholder="person"  class="inner-input"/>
        <label>Shortage:</label>
        <input formControlName="{{shortage}}" placeholder="shortage" class="inner-input"/>
      </p>

    <hr class="sep">

    <button id="btn_create" (click)="submit()" [disabled]="!form.valid">Submit</button> <button id="btn_cancel" (click)="cancelCreation()">Cancel</button>
  </div>
  </form>
</div>

Stackblitz Demo

Form-Validation not working properly Angular

1 Answers