普通にフォームを角で結合する方法

Question

私はガイドから書いたテンプレートフォームを持っていますが、実際には動作しません。 私はいくつかのモデルを持っている：

export class User { 
    constructor(public userId?: UserId, 
       public firstName?: String, 
       public lastName?: String, 
       public address?: Address) { 
    } 
} 

export class Address { 
    constructor(
    public street?: String, 
    public city?: String, 
    public zipCode?: String) { 
    } 
} 

私が持っているコンポーネント：

Component({ 
    templateUrl: 'user.html' 
}) 
export class MyComponent implements OnInit, OnDestroy{ 
    user: User; 
    userForm: NgForm; 
    ngOnInit(): void { 
    } 

とページ自体を：

<form novalidate #userForm="ngForm"> 


    <div class="form-group"> 

     <input required minlength="4" type="text" 
       id="firstName" 
       [(ngModel)]="user.firstName" name="firstName"> 
     <small *ngIf="!firstName.valid">Not valid!</small> 
    </div> 
    <div class="form-group"> 
     <input required ng-minlength="4" type="text" 
       id="lastName" 
       [(ngModel)]="user.lastName" name="lastName"> 
    </div> 

    <div ngModelGroup="user.address"> 
     <div class="form-group"> 
      <input required ng-minlength="4" 
        type="text" 
        id="address-house" 
        [(ngModel)]="user.address.address1" name="address.address1"> 
     </div> 

     <div class="form-group"> 
      <div class="form-group"> 
       <input required ng-minlength="4" 
         type="text" 
         id="zipCode" 
         [(ngModel)]="user.address.zipCode" name="address.zipCode"> 
      </div> 
      <div> 
       <input required ng-minlength="4" 
         type="text" 
         lass="form-control input-lg" 
         id="city" 
         [(ngModel)]="user.address.city" name="address.city"> 
      </div> 
     </div> 

    </div> 
    <button type="button" (click)="checkAndProceed()">Continue</button> 
    </div> 
</form> 

私がやりたい唯一のことは、検証を追加することである - それがすべてです。ガイドのどれも助けなかった。 htmlの検証やtsの検証はできますか？ 「続行」ボタンをクリックして有効性を確認し、そうであれば有効にするといいでしょう。私は、さらに、コンソールのエラーを取得し、検証する。この場合

： Cannot read property 'valid' of undefined

Answer 1

入力要素の属性がたくさんあります。名前、ID、およびテンプレート参照変数があります。あなたのコードにテンプレート参照変数がありません。これは、要素への参照を保持し、有効な、汚れた、および他のフラグが関連付けられているテンプレート参照変数です。

<div class="form-group"> 
    <input required minlength="4" type="text" 
      id="firstName" 
      [(ngModel)]="user.firstName" name="firstName" 
      #firstNameVar="ngModel"> 
    <small *ngIf="!firstNameVar.valid">Not valid!</small> 
</div> 

お知らせ#firstNameVar：

は例えば、このようなテンプレートの参照変数を含めるようにコードを変更します。これがテンプレート参照変数です。これは、あなたのIdとname属性と同じものに名前をつけることができます。他の2つの属性の間で容易に区別できるように、名前を変えました。 https://angular.io/guide/template-syntax#ref-vars

：

も注意* ngIfは、テンプレート参照変数の詳細についてはfirstNameVar.valid

を使用するように変更されていること、これを見ます