Issue with Argument of type "" is not assignable to paramerter of type string[] - for angular

Question

I am trying to deploy my application using visual studio and when I run "node_modules\webpack \bin\webpack.js --env.prod" I get the error below I also added ("strictNullChecks":false) to my ts.config.json and it still didn't work, any help fixing this issue would be greatly appreciated.

Error

ERROR IN AddEmployee.component.html (121,13): Argument of type '"amount"'
is not assignable to parameter of type 'string[]'.

Here is my fetchemployee.component.ts

import { Component, Inject, SimpleChange, SimpleChanges } from
'@angular/core';

import { Http, Headers } from '@angular/http';

import { Router, ActivatedRoute } from '@angular/router';

import { saveAs } from 'file-saver/FileSaver';

import { EmployeeService } from '../../services/empservice.service'


@Component({
   selector: 'fetchemployee',

   templateUrl: './fetchemployee.component.html',

   styleUrls: ['./fetchemployee.component.css']

})
export class FetchEmployeeComponent {

   public empList: EmployeeData[] | any;


   constructor(public http: Http, private router: Router, private
employeeService: EmployeeService) {

       this.getEmployees();

   }

   getEmployees() {

       this.employeeService.getEmployees().subscribe(
           data => this.empList = data
       )

   }

   delete(employeeID) {

       var ans = confirm(`Are you shoure you want to delete this deduction
for: ${employeeID}`);

       if (ans) {

           this.employeeService.deleteEmployee(employeeID).subscribe
((data) => {

                   this.getEmployees();

               },
               error => console.error(error))

       }

   }

   getSum(column, e: any[]): string {
       let sum = 0;
       for (let i = 0; i < e.length; i++) {
           console.log("Yo the array is " + e.length);
           sum += parseFloat(e[i][column]);
       }
       return sum.toLocaleString('en');
   }

   exportEsker(data: any) {

       const replacer = (key, value) => value === null ? '' : value; //
specify how you want to handle null values here
       const k = ["name", "empno", "purtype", "bp", "amount"];
//Object.keys(data[0]);
       const actualheader = ["Employee Name", "Employee No.", "Pur. Type",
"B/P", "Amount"];


       console.log(k);
       console.log(data);

       let csv = data.map(row => k.map(fieldName => JSON.stringify(row
[fieldName], replacer)).join(','));
       csv.unshift(actualheader.join(','));

       let csvArray = csv.join('\r\n');
       console.log(csvArray);
       var blob = new Blob([csvArray], { type: 'text/csv' });
       saveAs(blob, "myFile.csv");
   }


   term: string = "";
}

interface EmployeeData {

   id: number;

   name: string;

   empno: string;

   purtype: string;

   bp: string;

   amount: number;
}

Here is my AddEmployee.component.ts

import { Component, OnInit } from "@angular/core";
import { Http, Headers } from "@angular/http";
import { NgForm, FormBuilder, FormGroup, Validators, FormControl } from
"@angular/forms";
import { Router, ActivatedRoute } from "@angular/router";
import { FetchEmployeeComponent } from
"../fetchemployee/fetchemployee.component";
import { EmployeeService } from "../../services/empservice.service";

@Component({
   selector: "createemployee",
   templateUrl: "./AddEmployee.component.html"
})

export class createemployee implements OnInit {
   employeeForm: FormGroup;
   title: string = "Create";
   id: number;
   errorMessage: any;

   constructor(private _fb: FormBuilder, private _avRoute: ActivatedRoute,
       private _employeeService: EmployeeService, private _router: Router)
{
       if (this._avRoute.snapshot.params["id"]) {
           this.id = this._avRoute.snapshot.params["id"];
       }

       this.employeeForm = this._fb.group({
           id: 0,
           name: ["", [Validators.required]],
           empno: ["", [Validators.required]],
           purtype: ["", [Validators.required]],
           bp: ["", [Validators.required]],
           amount: ["", [Validators.required]]

       });
   }

   ngOnInit() {
       if (this.id > 0) {
           this.title = "Edit";
           this._employeeService.getEmployeeById(this.id)
               .subscribe(resp => this.employeeForm.setValue(resp)
                   , error => this.errorMessage = error);
       }
   }

   save() {

       if (!this.employeeForm.valid) {
           return;
       }

       if (this.title === "Create") {
           this._employeeService.saveEmployee(this.employeeForm.value)
               .subscribe(() => {
                   this._router.navigate(["/fetch-employee"]);
               }, error => this.errorMessage = error);
       }
       else if (this.title === "Edit") {
           this._employeeService.updateEmployee(this.employeeForm.value)
               .subscribe(() => {
                   this._router.navigate(["/fetch-employee"]);
               }, error => this.errorMessage = error);
       }
   }

   cancel() {
       this._router.navigate(["/fetch-employee"]);
   }



   get name() { return this.employeeForm.get("name"); }

   get empno() { return this.employeeForm.get("empno"); }

   get purtype() { return this.employeeForm.get("purtype"); }

   get bp() { return this.employeeForm.get("bp"); }

   get amount() { return this.employeeForm.get("amount");  }

}

Here is my AddEmployee.component.html

<!DOCTYPE html>

<html>

<head>

   <meta charset="utf-8" />

   <title></title>

</head>

<body>

<h1>{{title}}</h1>

<h3>Employee Deduction</h3>

<hr />

<form [formGroup]="employeeForm" (ngSubmit)="save()" #formDir="ngForm"
novalidate>

   <div class="form-group row">

       <label class=" control-label col-md-12" for="Name">Name:</label>

       <div class="col-md-4">

           <input class="form-control" type="text" formControlName="name">

       </div>

       <span class="text-danger" *ngIf="employeeForm.hasError('required',
'name') && formDir.submitted">

           Name is required.

       </span>

   </div>

   <div class="form-group row">

       <label class=" control-label col-md-12" for="Empno">Employee
Number:</label>

       <div class="col-md-4">

           <input class="form-control" type="text" formControlName
="empno">

       </div>

       <span class="text-danger" *ngIf="employeeForm.hasError('required',
'empno') && formDir.submitted">

           Employee number is required.

       </span>

   </div>

   <div class="form-group row">

       <label class="control-label col-md-12" for="Purtype">Pur Type:</
label>

       <div class="col-md-4">

           <select class="form-control" data-val="true" formControlName
="purtype">

               <option value="">-- Select Pur Type --</option>

               <option value="MIS">MIS</option>

               <option value="TLS">TLS</option>

               <option value="UNI">UNI</option>


           </select>

       </div>

       <span class="text-danger" *ngIf="employeeForm.hasError('required',
'purtype') && formDir.submitted">

           Pur Type is required

       </span>

   </div>

   <div class="form-group row">

       <label class="control-label col-md-12" for="Bp">B/P:</label>

       <div class="col-md-4">

           <select class="form-control" data-val="true" formControlName
="bp">

               <option value="">-- Select B/P --</option>

               <option value="B">B</option>

               <option value="P">P</option>

           </select>

       </div>

       <span class="text-danger" *ngIf="employeeForm.hasError('required',
'bp') && formDir.submitted">

           B/P is required

       </span>

   </div>

   <div class="form-group row">

       <label class=" control-label col-md-12" for="Amount">Amount:</label


       <div class="col-md-4">

           <input class="form-control" type="number" step="0.01"
formControlName="amount">

       </div>

       <span class="text-danger" *ngIf="employeeForm.hasError('required',
'amount') && formDir.submitted">

           Amount is required.

       </span>

   </div>


   <div class="form-group">

       <button type="submit" class="btn btn-primary">Save</button>

       <button class="btn btn-danger" (click)="cancel()">Cancel</button>

   </div>

</form>

</body>

</html>

Answer 1

The error points the the line

<span class="text-danger" 
      *ngIf="employeeForm.hasError('required', 'amount') && formDir.submitted">

You're trying to pass 'amount' as the second argument of FormGroup.hasError() , but as you can see in the documentation (and in the error message), the second argument is supposed to be an array of strings.