角度4フォーム検証

Question

ハイテク角度、開発者が...私はこのようなフォームを持っている...しかし、このコード行で私のIDEショーのエラーは=>*ngIf="userName.errors?.required && userName.touched

は私も公式文書として*ngIf="useName.errors.minlengthを試みたが、私はまだそのエラーがあり、私のコードは動作していません。 。あなたはこの画像の完全なIDEエラーを見ることができます。 。私はそれをどのように修正すべきですか？

<form class="form-group" novalidate #f="ngForm" > 
     <div> 
      <label>name</label> 
      <input 
        type="text" 
        class="form-control" 
        [(ngModel)]="user.name" 
        name="name" 
        #userName="ngModel" 
        minlength="2" 
        required 
      > 
      <div class="alert alert-danger" *ngIf="userName.errors?.required && userName.touched ">name is required 

      </div> 

     </div> 
     <div> 
      <label>email</label> 
      <input 
        type="email" 
        class="form-control" 
        [(ngModel)]="user.email" 
        name="email" 
        #userEmail="ngModel" 
        required 
      > 
      <div class="alert alert-danger" *ngIf="userEmail.errors && (userEmail.touched || userEmail.dirty)"> 
       email is required 
      </div> 
     </div> 
     <div> 
      <label>phone</label> 
      <input 
        type="text" 
        class="form-control" 
        [(ngModel)]="user.phone" 
        name="phone" 
        #userName="ngModel" 
        minlength="10" 
      > 
     </div> 
     <div> 
      <button type="submit" class="btn btn-success">ok</button> 
     </div> 
    </form> 

あなた

は、これは私のコンポーネントクラス

export class SandboxComponent { 


    user = { 
     name: '', 
     email: '', 
     phone: '' 
    }} 

であり、ここで私のapp.module.ts

import {BrowserModule} from '@angular/platform-browser'; 
import {NgModule} from '@angular/core'; 
import { FormsModule } from '@angular/forms' 


import {AppComponent} from './app.component'; 
import {SandboxComponent} from './components/sandbox/sandbox.component'; 

@NgModule({ 
    declarations: [ 
     AppComponent, 
     SandboxComponent 
    ], 
    imports: [ 
     BrowserModule, 
     FormsModule 
    ], 
    providers: [], 
    bootstrap: [AppComponent] 
}) 
export class AppModule { 
} 

Answer 1

構文私が使用して（と作品が）です

form.hasErrors('field', ['errors']) 

あなたのケースでは、それは

f.hasErrors('userEmail', ['required']) 

だろう。しかし、今、あなたはreactiveFormsを作成していない（またはあなたがそれを投稿していない）ので、あなたが、あなたのフォームformControlNameを与える必要があり