앵글 4에서 ng-content를 사용하여 버튼을 제출하려면 [disabled] = '! f.valid'를 어떻게 추가합니까?

Question

전자 메일, 비밀번호 필드 및 제출 버튼이 포함 된 양식 구성 요소가 있어야 로그인 양식 '로그인'버튼이 표시되고 등록 양식의 '등록'버튼이 표시 될 수 있습니다. 양식 구성 요소 템플릿 코드 : 폼의 부모 구성 요소의

<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> 

실행 한 후이 코드 "형식 오류 : 부동산의 '유효'정의의를 읽을 수 없습니다"오류가 발생했습니다. 이 오류를 해결하는 방법?

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