在angular2中显示验证错误消息时出错

Question

我正在使用angular2js + nodejs，在显示文本区域的错误验证时出现错误，在表单上输入type =“ text”

错误是：

在此处输入图片说明

这是我的component，module，html代码

**Component File**

import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';
import { AdventureService } from '../../services/adventure.service';

@Component({
  moduleId: module.id,
  selector: 'listing-details',
  templateUrl: 'details.component.html',
  styleUrls: ['details.component.css']
 })

export class DetailsComponent implements OnInit {
 description:string = '';
 gearRequired:string[] = [];
 policies:string[] = [];

private shortAdventureInfo:any;

constructor(private router:Router, public adventureService:AdventureService) {
  }

ngOnInit() {
this.shortAdventureInfo = AdventureService.shortAdventureInfo;
}

saveSpecificDetails() {
  let data = {
  description: this.description,
  gearRequired: this.gearRequired,
  policies: this.policies
};
  this.adventureService.saveSpecificAdventureDetails(AdventureService.shortAdventureInfo.id, data)
  .subscribe(
    response => {
      this.router.navigate(['/create-listing/location']);
    },
      <!--err => console.error(err.json())-->
    );
 }

}

================================================== ==================模块文件：

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { DetailsComponent } from './index';
import { FormsModule } from "@angular/forms";

@NgModule({
 imports: [CommonModule,FormsModule],
 declarations: [DetailsComponent],
 exports: [DetailsComponent],
 providers: []
})
export class DetailsModule { }

================================================== ================= HTML文件：

 <div class="col-xs-12 col-sm-12 col-md-5 nopadding pull-left step2_left">
              <form #myformForm="ngForm" class="float-label" spellcheck="false">
                <div class="control col-xs-12 col-sm-12 col-md-12 nopadding">
                <!-- (keyup) ="addDesc(description.value);" -->
                  <div *ngIf="description.errors && description.dirty && description.touched"
                         class="validation-error">
                    <div [hidden]="!description.errors.required">
                      <p>Description is required</p>
                    </div>
                    <!-- <div [hidden]="!description.errors.minlength">
                      <p>Description must be at least 5 characters long.</p>
                    </div>
                    <div [hidden]="!description.errors.maxlength">
                      <p>Description cannot be more than 1500 characters long.</p>
                    </div> -->
                  </div>
                  <textarea type="text" cols="" rows="14" 
                  placeholder="Description (Max. 1500 Characters are allowed)"
                  required [attr.maxlength]="1500"
                  [style.border-color]="getDescStyle(description.value)"
                  [(ngModel)] = "shortAdventureInfo.description"
                  (blur) = "addDesc(description.value)"
                  name="description" #description="ngModel"></textarea>
                  <label for="When you arrive">Description<br>
                    <span>What should adventurers expect from this adventure in terms of new experiences and/or physical exertion?</span></label>
                </div>
              </form>
            </div>

谁能帮助我解决我的错误？ 提前致谢。

Answer 1

错误中提到了DetailsComponent.getDescStyles-因此请尝试查找错误