title: Angular2 cannot read property of 'valid' of undefined for the form
body: <p>Hi I am using form but for some incomprehensible reason, it's giving me an error </p>
  
  <p>"cannot read property of 'valid' of undefined "</p>
  
  <p>These are my code </p>
  
  <p>My component template</p>
  
  <pre><code>     &lt;form name="form" (ngSubmit)="f.form.valid &amp;&amp; recommend(f.value, f.valid)" #f="ngForm" novalidate&gt;
  
      &lt;p class="font2"&gt;&lt;span class="font3"&gt;STEP1.&lt;/span&gt;학생정보(필수)&lt;/p&gt;
      &lt;div class="form-group" [ngClass]="{'has-error': f.submitted &amp;&amp; !gender.valid }"&gt;
        &lt;label style="display:block" for="gender" class="font4"&gt;성별&lt;/label&gt;
        &lt;div id="radiobtn" *ngFor="let g of gender"&gt;
          &lt;input id="radio" type="radio" class="form-control" name="gender" [(ngModel)]="user.gender" [value]="g.value" #gender="ngModel"
            required/&gt;
          &lt;p id="radioButton"&gt;{{g.display}}&lt;/p&gt;
        &lt;/div&gt;
      &lt;/div&gt;
  
     &lt;div class="form-group" [ngClass]="{'has-error': f.submitted &amp;&amp; !schoolType.valid }"&gt;
        &lt;label for="schoolType" class="font4"&gt;학교구분&lt;/label&gt;
        &lt;select (change) ="select_schoolType()" class="form-control" name="schoolType" [(ngModel)]="user.schoolType" #schoolType="ngModel" required&gt;
          &lt;option *ngIf="user.schoolType == ''"&gt;학교구분 선택&lt;/option&gt;
          &lt;option *ngFor= "let gt of gradeTypes" [ngValue]="gt"&gt;{{gt.gradeName}}&lt;/option&gt;
  &lt;/select&gt;
        &lt;div class="font6" *ngIf="f.submitted &amp;&amp; !schoolType.valid" class="help-block"&gt;학교구분을 선택해주세요.&lt;/div&gt;
      &lt;/div&gt;
  
      &lt;div class="form-group" [ngClass]="{'has-error': f.submitted &amp;&amp; !affiliation.valid }"&gt;
        &lt;label for="affiliation" class="font4"&gt;계열&lt;/label&gt;
        &lt;select class="form-control" name="affiliation" [(ngModel)]="user.affiliation" #affiliation="ngModel" required&gt;
              &lt;option *ngIf="user.affiliation == ''"&gt;계열 선택&lt;/option&gt;
          &lt;option *ngFor = "let a of affiliations" [ngValue]="a.value"&gt;{{a.display}}&lt;/option&gt;
  &lt;/select&gt;
        &lt;div class="font6" *ngIf="f.submitted &amp;&amp; !affiliation.valid" class="help-block"&gt;계열을 선택해주세요.&lt;/div&gt;
      &lt;/div&gt;
  
      &lt;p class="font2"&gt;&lt;span class="font3"&gt;STEP2.&lt;/span&gt;과외정보(필수)&lt;/p&gt;
  
      &lt;div class="form-group" [ngClass]="{'has-error': f.submitted &amp;&amp; !subject.valid }"&gt;
        &lt;label for="subject" class="font4"&gt;과목&lt;/label&gt;
        &lt;select class="form-control" name="subject" [(ngModel)]="user.subject" #subject="ngModel" required&gt;
              &lt;option *ngIf="user.subject == ''"&gt;과목 선택&lt;/option&gt;
          &lt;option *ngFor="let s of subjects" [ngValue]="s.value"&gt;{{s.display}}&lt;/option&gt;
  &lt;/select&gt;
        &lt;div class="font6" *ngIf="f.submitted &amp;&amp; !subject.valid" class="help-block"&gt;과목을 선택해주세요.&lt;/div&gt;
      &lt;/div&gt;
  
      &lt;div class="form-group" [ngClass]="{'has-error': f.submitted &amp;&amp; !district.valid }"&gt;
        &lt;label for="district" class="font4"&gt;지역&lt;/label&gt;
        &lt;input class="font5" placeholder="ex)서울시 서초구 서초동" type="text" class="form-control" name="district" [(ngModel)]="user.district"
          #district="ngModel" required/&gt;
        &lt;div class="font6" *ngIf="f.submitted &amp;&amp; !district.valid" class="help-block"&gt;지역은 필수항목 입니다.&lt;/div&gt;
      &lt;/div&gt;
  
      &lt;p class="font2"&gt;&lt;span class="font3"&gt;STEP3.&lt;/span&gt;연락처(필수)&lt;/p&gt;
      &lt;div class="form-group" [ngClass]="{'has-error': f.submitted &amp;&amp; !name.valid }"&gt;
        &lt;label for="name" class="font4"&gt;신청자 이름&lt;/label&gt;
        &lt;input *ngIf="currentUser == null" class="font5" placeholder="ex)김어몽" type="text" class="form-control" name="name" [(ngModel)]="user.name"
          #name="ngModel" required/&gt;
  
        &lt;div class="inv_div" *ngIf="currentUser"&gt;
          &lt;input *ngFor="let user of currentUser | getValues | slice:1:2" class="font5" type="text" required disabled class="form-control" name="name"
            #name="ngModel" [(ngModel)]="user.name" value="{{user.name}}"&gt;
        &lt;/div&gt;
  
        &lt;div class="font6" *ngIf="f.submitted &amp;&amp; !name.valid" class="help-block"&gt;이름은 필수항목 입니다.&lt;/div&gt;
      &lt;/div&gt;
  
      &lt;div class="form-group" [ngClass]="{'has-error': f.submitted &amp;&amp; !phone.valid }"&gt;
        &lt;label for="phone" class="font4"&gt;연락처&lt;/label&gt;
        &lt;input *ngIf="currentUser == null" class="font5" placeholder="ex)01012344321" type="text" class="form-control" name="phone"
          [(ngModel)]="user.phone" #phone="ngModel" pattern="^\d{3}\d{4}\d{4}$" required/&gt;
  
        &lt;div class="inv_div" *ngIf="currentUser"&gt;
          &lt;input *ngFor="let user of currentUser | getValues | slice:1:2" class="font5" type="text" required disabled class="form-control" name="phone"
            #phone="ngModel" [(ngModel)]="user.phone" value="{{user.phone}}"&gt;
        &lt;/div&gt;
  
        &lt;div *ngIf="f.submitted &amp;&amp; !phone.valid" class="help-block"&gt;올바른 형식의 휴대폰번호를 입력해주세요.&lt;/div&gt;
      &lt;/div&gt;
  
  
  
  
      &lt;div class="form-group" [ngClass]="{'has-error': f.submitted &amp;&amp; !admissionCategoryUid.valid }"&gt;
        &lt;input class="font5" type="hidden" class="form-control" name="admissionCategoryUid" [(ngModel)]="user.admissionCategoryUid"
          #admissionCategoryUid="ngModel" /&gt;
      &lt;/div&gt;
  
      &lt;div class="form-group" [ngClass]="{'has-error': f.submitted &amp;&amp; !highschoolUid.valid }"&gt;
        &lt;input class="font5" type="hidden" class="form-control" name="highschoolUid" [(ngModel)]="user.highschoolUid" #highschoolUid="ngModel"
        /&gt;
      &lt;/div&gt;
  
      &lt;div class="form-group" [ngClass]="{'has-error': f.submitted &amp;&amp; !universityUid.valid }"&gt;
        &lt;input class="font5" type="hidden" class="form-control" name="universityUid" [(ngModel)]="user.universityUid" #universityUid="ngModel"
        /&gt;
      &lt;/div&gt;
  
      &lt;div class="form-group" [ngClass]="{'has-error': f.submitted &amp;&amp; !universityMajorUid.valid }"&gt;
        &lt;input class="font5" type="hidden" class="form-control" name="universityMajorUid" [(ngModel)]="user.universityMajorUid" #universityMajorUid="ngModel"
        /&gt;
      &lt;/div&gt;
  
      &lt;div class="form-group" [ngClass]="{'has-error': f.submitted &amp;&amp; !level.valid }"&gt;
        &lt;input class="font5" type="hidden" class="form-control" name="level" [(ngModel)]="user.level" #level="ngModel" /&gt;
      &lt;/div&gt;
  
      &lt;div class="form-group" [ngClass]="{'has-error': f.submitted &amp;&amp; !lecturePerWeek.valid }"&gt;
        &lt;input class="font5" type="hidden" class="form-control" name="lecturePerWeek" [(ngModel)]="user.lecturePerWeek" #lecturePerWeek="ngModel"
        /&gt;
      &lt;/div&gt;
  
      &lt;div class="form-group" [ngClass]="{'has-error': f.submitted &amp;&amp; !lecturePerMinute.valid }"&gt;
        &lt;input class="font5" type="hidden" class="form-control" name="lecturePerMinute" [(ngModel)]="user.lecturePerMinute" #lecturePerMinute="ngModel"
        /&gt;
      &lt;/div&gt;
  
      &lt;div class="form-group" [ngClass]="{'has-error': f.submitted &amp;&amp; !priceStart.valid }"&gt;
        &lt;input class="font5" type="hidden" class="form-control" name="priceStart" [(ngModel)]="user.priceStart" #priceStart="ngModel"
        /&gt;
      &lt;/div&gt;
  
      &lt;div class="form-group" [ngClass]="{'has-error': f.submitted &amp;&amp; !priceEnd.valid }"&gt;
        &lt;input class="font5" type="hidden" class="form-control" name="priceEnd" [(ngModel)]="user.priceEnd" #priceEnd="ngModel" /&gt;
      &lt;/div&gt;
  
      &lt;div class="form-group" [ngClass]="{'has-error': f.submitted &amp;&amp; !message.valid }"&gt;
        &lt;input class="font5" type="hidden" class="form-control" name="message" [(ngModel)]="user.message" #message="ngModel" /&gt;
      &lt;/div&gt;
  
      &lt;div class="form-group" [ngClass]="{'has-error': f.submitted &amp;&amp; !email.valid }"&gt;
        &lt;input class="font5" type="hidden" class="form-control" name="email" [(ngModel)]="user.email" #email="ngModel" /&gt;
      &lt;/div&gt;
  
  
      &lt;div class="form-group" [ngClass]="{'has-error': f.submitted &amp;&amp; !grade.valid }"&gt;
        &lt;input class="font5" type="hidden" class="form-control" name="grade" [(ngModel)]="user.grade" #grade="ngModel" /&gt;
      &lt;/div&gt;
  
  
  
      &lt;p class="font6"&gt;용도 외에 사용 및 저장되지 않으며, &lt;br&gt;&lt;a href="#"&gt;개인정보 취급방침&lt;/a&gt;의 의거해 처리됩니다.&lt;br&gt;
        &lt;a href="#"&gt;개인정보 취급방침&lt;/a&gt;과 입력하신 정보를 추천 용도에 사용하는데 &lt;br&gt;동의하신다면 추천받기를 눌러주세요! &lt;/p&gt;
  
      &lt;button id="recommend-btn" [disabled]="loading"&gt;선생님 추천받기&lt;/button&gt;
      &lt;img *ngIf="loading" src="data:image/gif;base64,R0lGODlhEAAQAPIAAP///wAAAMLCwkJCQgAAAGJiYoKCgpKSkiH/C05FVFNDQVBFMi4wAwEAAAAh/hpDcmVhdGVkIHdpdGggYWpheGxvYWQuaW5mbwAh+QQJCgAAACwAAAAAEAAQAAADMwi63P4wyklrE2MIOggZnAdOmGYJRbExwroUmcG2LmDEwnHQLVsYOd2mBzkYDAdKa+dIAAAh+QQJCgAAACwAAAAAEAAQAAADNAi63P5OjCEgG4QMu7DmikRxQlFUYDEZIGBMRVsaqHwctXXf7WEYB4Ag1xjihkMZsiUkKhIAIfkECQoAAAAsAAAAABAAEAAAAzYIujIjK8pByJDMlFYvBoVjHA70GU7xSUJhmKtwHPAKzLO9HMaoKwJZ7Rf8AYPDDzKpZBqfvwQAIfkECQoAAAAsAAAAABAAEAAAAzMIumIlK8oyhpHsnFZfhYumCYUhDAQxRIdhHBGqRoKw0R8DYlJd8z0fMDgsGo/IpHI5TAAAIfkECQoAAAAsAAAAABAAEAAAAzIIunInK0rnZBTwGPNMgQwmdsNgXGJUlIWEuR5oWUIpz8pAEAMe6TwfwyYsGo/IpFKSAAAh+QQJCgAAACwAAAAAEAAQAAADMwi6IMKQORfjdOe82p4wGccc4CEuQradylesojEMBgsUc2G7sDX3lQGBMLAJibufbSlKAAAh+QQJCgAAACwAAAAAEAAQAAADMgi63P7wCRHZnFVdmgHu2nFwlWCI3WGc3TSWhUFGxTAUkGCbtgENBMJAEJsxgMLWzpEAACH5BAkKAAAALAAAAAAQABAAAAMyCLrc/jDKSatlQtScKdceCAjDII7HcQ4EMTCpyrCuUBjCYRgHVtqlAiB1YhiCnlsRkAAAOwAAAAAAAAAAAA=="
      /&gt;
    &lt;/form&gt;
  </code></pre>
  
  <p>my component</p>
  
  <pre><code>import { Component, OnInit, ViewChild } from '@angular/core';
  import { Router, ActivatedRoute } from '@angular/router';
  
  import { FormBuilder, FormGroup, Validators } from '@angular/forms';
  
  import { MemberRecommendTeacherUserInfo } from '../../model/recommend_teacher';
  import { RecommendTeacher } from '../../repo/recommendation/recommend-teacher';
  import { ModalDirective } from 'ngx-bootstrap/modal';
  import { User } from '../../model/auth_user';
  import { LoginCheckService } from '../../repo/auth/login_check.service';
  
  @Component({
      moduleId: module.id,
      selector: 'selector',
      templateUrl: 'recommend_teacher.component.html',
      styleUrls: ['recommend_teacher.component.css']
  })
  export class RecommendTeacherComponent implements OnInit {
  
      loading = false;
      user: MemberRecommendTeacherUserInfo;
  
      errorMessage: any;
  
      returnUrl: string;
  
      currentUser: User;
  
      constructor(
          private router: Router,
          private route: ActivatedRoute,
          private Rec_Tea: RecommendTeacher,
          private loginCheck: LoginCheckService) {
          this.currentUser = this.loginCheck.LoginCheck();
          this.loginCheck.ifNull(this.currentUser);
      }
  
      @ViewChild('childModal') public childModal: ModalDirective;
  
      public hideChildModal(): void {
          this.childModal.hide();
          this.router.navigate([this.returnUrl]);
      }
  
      public recommend(f, validity_check): void {
          if (!validity_check) return;
  
              this.loading = true;
              this.Rec_Tea.recommendTeacher(
                  this.schoolType_val,
                  this.user.grade,
                  this.user.gender,
                  this.user.affiliation,
                  this.user.admissionCategoryUid,
                  this.user.highschoolUid,
                  this.user.universityUid,
                  this.user.universityMajorUid,
                  this.user.subject,
                  this.user.level,
                  this.user.district,
                  this.user.lecturePerWeek,
                  this.user.lecturePerMinute,
                  this.user.priceStart,
                  this.user.priceEnd,
                  this.user.message,
                  this.user.phone,
                  this.user.name,
                  this.user.email)
                  .subscribe(
                  data =&gt; {
                      this.Rec_Tea.extractData(data);
                      this.childModal.show();
                  },
                  error =&gt; {
                      this.loading = false;
                      this.Rec_Tea.handleError(this.errorMessage)
                  });
      }
  </code></pre>
  
  <p>When  i used this</p>
  
  <pre><code>&lt;div&gt;Form details:-&lt;/div&gt;
  &lt;pre&gt;Is form valid?: &lt;br&gt;{{f.valid | json}}&lt;/pre&gt;
  &lt;pre&gt;Is form submitted?: &lt;br&gt;{{f.submitted | json}}&lt;/pre&gt;
  &lt;pre&gt;submitted value: &lt;br&gt;{{f.value | json}}&lt;/pre&gt;
  </code></pre>
  
  <p>everything showed properly</p>
  
  <p>but whenever I submit the form I get these errors
  <a href="https://i.stack.imgur.com/JPdzL.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/JPdzL.png" alt="enter image description here"></a></p>
  
  <p>Please help me fix this.. Thank you.</p>