角度4でng-contentを使用してボタンを送信するには[disabled] = '！f.valid'を追加するにはどうすればよいですか？

Question

電子メール、パスワードフィールド、送信ボタンを含むフォームコンポーネントがあり、ログインのために 'ログイン'フォームが表示され、登録フォームの '登録'ボタンが表示されます。 Formコンポーネントのテンプレートコード：フォームの親コンポーネントの

<form #f="ngForm" (ngSubmit)="onSubmit(f.value)"> 

    <div class="form-group"> 
    <label for="email">Email</label> 
    <input type="email" 
    class="form-control" 
    placeholder="Enter email address" 
    name="email" 
    ngModel 
    > 
    </div> 

    <div class="form-group"> 
     <label for="password">Password</label> 
     <input type="password" 
     class="form-control" 
     placeholder="Enter the password" 
     name="password" 
     ngModel 
     > 
    </div> 


    <ng-content select="[submitbtn]" ></ng-content> 

コード：実行した後に

<div class="row"> 
      <div class="col-md-6"> 
      <!--For Login--> 
      <app-form-content> 

     <button type="submit" class="btn btn-default" submitbtn>Login</button> 
      </app-form-content> 
      </div> 
      <!--For register--> 
      <div class="col-md-6"> 
      <app-form-content> 
       <button type="submit" class="btn btn-default" [disabled]="!f.valid" submitbtn>Register</button> 
      </app-form-content> 
      </div> 
     </div> 

このコード「はTypeError：プロパティを読み取ることができません 『有効』未定義の」エラーが発生しました。このエラーを解決するには？

Answer 1

template reference variable#fは、そのスコープが宣言されたテンプレート全体であるため、親テンプレートには使用できません。その後

@ViewChild('f') f: NgForm; 

あなたが親テンプレートに親テンプレートの参照#formContentからこのプロパティを取得することができます：私はあなたのフォーム・コンポーネント内のプロパティを宣言することをお勧め親テンプレート内でこの変数にアクセスするために

以下のような：

<app-form-content #formContent> 
    <button type="submit" class="btn btn-default" [disabled]="!formContent.f.valid" 

Stackblitz Example