Angular4显示动态表单的验证错误消息，其中字段是动态传递的

Question

我无法显示下面提到的TextArea的验证错误消息（请填写上面的字段）。在这种情况下，字段和字段值都是动态的。

//这是html

<div class="form-group row" *ngIf="!resourceParams.dependant" [ngClass]="{'required': resourceParams.required}">
          <label class="col-4 col-form-label">{{resourceParams.resourceParamLabel}}</label>
          <div class="col-5" *ngIf="resourceParams.resourceParamType.resourceParamTypeValue === 'TextArea'">
            <textarea cols="4" rows="4"  [required]="resourceParams.required" class="form-control"   name="resource-{{resourceParams.resourceParam}}" [(ngModel)]="resource.RESOURCE_VALUE[i]"></textarea>
          </div>

//下面我提到了Ts文件，请看。另请指导我如何在Angulat 4中显示验证错误消息。这里的字段和值都是动态的。

import {Component, OnInit, ViewChild, ViewContainerRef} from '@angular/core';
import { ActivatedRoute } from "@angular/router";
import {Router} from "@angular/router";
import {NgForm} from "@angular/forms";
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/concatMap';
import 'rxjs/add/operator/filter';
import {GetResourceParamsService} from "../service/getParams.service";
import {ResourceService} from "../service/resource.service";
import {ResourceType, Resource} from "../../models/resourceType";
import {RESOURCE_PARAM} from "../../models/resourceParamType";
import * as _ from 'underscore';
import {ToastsManager} from "ng2-toastr";
import {error} from "util";
import { Location } from "@angular/common";
@Component({
  selector: 'app-create-resource',
  templateUrl: './create-resource.component.html',
  styleUrls: ['./create-resource.component.css']
})
export class CreateResourceComponent implements OnInit {
  listResourceTypes: ResourceType[];
  showParams : boolean = false;
  listOfResourceParams : RESOURCE_PARAM[];
  selectedResourceTypeId;
  resource : Resource;
  resourceParams;
  @ViewChild('f') createGenericForm: NgForm;
  constructor(private route: ActivatedRoute,private router: Router,public location: Location,private _getResourceService :GetResourceParamsService , private _resourceService : ResourceService,public toastr: ToastsManager, vcr: ViewContainerRef) {
        this.toastr.setRootViewContainerRef(vcr);
  }
  resourceTypeChange($event){
    console.log(this.selectedResourceTypeId);    this._getResourceService.getResourceParamById(this.selectedResourceTypeId).subscribe( data => {
      this.listOfResourceParams = data;
      console.log(this.listOfResourceParams);
      this.showParams = true;
      this.resource = new Resource();
      var srch = new ResourceType();
      srch.resourceTypeId = +this.selectedResourceTypeId;
      var selectedRsr = _.findWhere(this.listResourceTypes, srch); // To Find the Type
      this.resource.RESOURCE_TYPE = selectedRsr.resourceType;
      this.resource.RESOURCE_ID = selectedRsr.resourceTypeId;
      _.each(this.listOfResourceParams, dt => {
        if(!this.resource.RESOURCE_PARAMS){
          this.resource.RESOURCE_PARAMS = [];
        }
        this.resource.RESOURCE_PARAMS.push(dt.resourceParam);
        if(!this.resource.RESOURCE_VALUE)
        {
          this.resource.RESOURCE_VALUE = [];
        }
        if(dt.resourceParamType.resourceParamTypeValue === 'String'){
          this.resource.RESOURCE_VALUE.push("");
        }
        if(dt.resourceParamType.resourceParamTypeValue === 'Number'){
          this.resource.RESOURCE_VALUE.push(0);
        }
        if(dt.resourceParamType.resourceParamTypeValue === 'Boolean'){
          this.resource.RESOURCE_VALUE.push("TRUE");
        }
        if(dt.resourceParamType.resourceParamTypeValue === 'TextArea'){
          this.resource.RESOURCE_VALUE.push("");
        }
        if(!dt.multiselect && dt.resourceParamType.resourceParamTypeValue === 'List' ){
          this.resource.RESOURCE_VALUE.push("");
        }
        if(dt.multiselect && dt.resourceParamType.resourceParamTypeValue === 'List' ){
          var multi = [];
          _.each(dt.resourceParamValues, val=> {
            multi.push({name : val , value : false});
          });
          this.resource.RESOURCE_VALUE.push(multi);
        }
      });
      console.log(this.resource);
      } , error => {
      this.showParams = false;
      if(error == "Server Error") {
        this.toastr.error('Unable to load Resource Params due to system error. Please try again after sometime.', 'ERROR');
      } else {
        this.toastr.error("Unable to load Resource Params due to: " + error, "ERROR");
        console.log(error);
      }
    });
  }
  ngOnInit() {
    this._getResourceService.getAllResource().subscribe( data=> {
      console.log(data);
      this.listResourceTypes = data;
    }, error => {
      if(error == "Server Error") {
        this.toastr.error('Unable to load Resource Types due to system error. Please try again after sometime.', 'ERROR');
      } else {
        this.toastr.error("Unable to load Resource Types due to: " + error, "ERROR");
        console.log(error);
      }
    });
  }
  onListChange(val,resorceParam,resorceParamId,master){
      console.log(val);
      console.log(resorceParam);
      console.log(resorceParamId);
      console.log(master);
  }
  updateCheckedOptions(option, i , j, event) {
    if (event.target.checked) {
      this.resource.RESOURCE_VALUE[i][j].value = true;
    } else {
      this.resource.RESOURCE_VALUE[i][j].value = false;
    }
    console.log(this.resource);
  }
onlyNumberKey(event) {
    return (event.charCode == 8 || event.charCode == 0) ? null : event.charCode >= 48 && event.charCode <= 57;
  }
  createResource(){
    console.log(this.resource);
    var payLoad = _.object(this.resource.RESOURCE_PARAMS, this.resource.RESOURCE_VALUE);    this._resourceService.addResource(this.resource.RESOURCE_TYPE.toLowerCase(),payLoad).subscribe( sucess => {
      console.log("Sucess");
      localStorage.setItem('successMsg',"Successfully created Resource of type " + this.resource.RESOURCE_TYPE);
      this.router.navigate(['resource/update/'+this.resource.RESOURCE_TYPE+'/'+this.resource.RESOURCE_VALUE[0]]);
    } , error => {
        if(error == "Server Error") {
          this.toastr.error('Unable to create Resource due to system error. Please try again after sometime.', 'ERROR');
        } else {
          this.toastr.error("Unable to create Resource due to: " + error, "ERROR");
          console.log(error);
        }
    })
    console.log(payLoad);//playload in console
  }

}