Angular Form Validation Tutorial 的問題

General
1

我跟著以下網址:
https://angular.io/guide/form-validation

來學angular form validation, 我用VS code 來做開發的,發覺以下問題:

  • 有時候不知什麼原因,要restart web server 才能成功compile

  • 我的hero-form.component.ts程式碼如下:

      import { Component, OnInit } from '@angular/core';
  import { Hero } from './hero';
  @Component({
    selector: 'app-hero-form',
    templateUrl: './hero-form.component.html',
    styleUrls: ['./hero-form.component.css']
  })
  export class HeroFormComponent implements OnInit {

    powers = ['Really Smart', 'Super Flexible',
    'Super Hot', 'Weather Changer'];

    model = new Hero(18, 'Dr IQ', this.powers[0], 'Chuck Overstreet');
    submitted = false;
    constructor() { }

    ngOnInit() {
    }
    onSubmit() { this.submitted = true; }

    // TODO: Remove this when we're done
    get diagnostic() { return JSON.stringify(this.model); }
    newHero() {
  	this.model = new Hero(42, '', '');
    }
  }

    我的hero-form.component.html程式碼如下:

    	<form (ngSubmit)="onSubmit()" #heroForm="ngForm">
  <div class="form-group">
    <label for="name">Name</label>
    <input id="name" name="name" class="form-control" required
  	minlength="4" appForbiddenName="bob"
  	[(ngModel)]="model.name" #name="ngModel" >

    <div *ngIf="name.invalid && (name.dirty || name.touched)" class="alert alert-danger">
  	  <div *ngIf="name.errors.required">
  		Name is required.
  	  </div>
  	  <div *ngIf="name.errors.minlength">
  		Name must be at least 4 characters long.
  	  </div>
  	  <div *ngIf="name.errors.forbiddenName">
  		Name cannot be Bob.
  	  </div>
    </div>
   .........
  </form>

    我不知道為什麼以下幾句下邊都出現波浪底線,但它們是work 的,真搞笑:sweat_smile:.

    <div *ngIf="name.errors.required">
 .......
<div *ngIf="name.errors.minlength">
 .........
<div *ngIf="name.errors.forbiddenName">

    請問題出在那裡呢? 詳情可參考attachment.

problem
problem.png1354×468 49.2 KB

2

會出現紅色底線是因為 TypeScript 不知道 errors 裡面有這些 property，改使用

 <div *ngIf="name.hasError('required')">
      Name is required.
    </div>
    <div *ngIf="name.hasError('minlength')">
      Name must be at least 4 characters long.
    </div>
    <div *ngIf="name.hasError('forbiddenName')">
      Name cannot be Bob.
    </div>

就不會出現那個訊息了

3

多謝師兄指點, 這是VS code 的問題嗎?還是其他問題嗎?