forms - Angular2 无法读取表单未定义的 'valid' 属性

Question

您好，我正在使用表单，但由于某些难以理解的原因，它给了我一个错误

“无法读取未定义的‘有效’属性”

这些是我的代码

我的组件模板

     <form name="form" (ngSubmit)="f.form.valid && recommend(f.value, f.valid)" #f="ngForm" novalidate>

    <p class="font2"><span class="font3">STEP1.</span>학생정보(필수)</p>
    <div class="form-group" [ngClass]="{'has-error': f.submitted && !gender.valid }">
      <label style="display:block" for="gender" class="font4">성별</label>
      <div id="radiobtn" *ngFor="let g of gender">
        <input id="radio" type="radio" class="form-control" name="gender" [(ngModel)]="user.gender" [value]="g.value" #gender="ngModel"
          required/>
        <p id="radioButton">{{g.display}}</p>
      </div>
    </div>

   <div class="form-group" [ngClass]="{'has-error': f.submitted && !schoolType.valid }">
      <label for="schoolType" class="font4">학교구분</label>
      <select (change) ="select_schoolType()" class="form-control" name="schoolType" [(ngModel)]="user.schoolType" #schoolType="ngModel" required>
        <option *ngIf="user.schoolType == ''">학교구분 선택</option>
        <option *ngFor= "let gt of gradeTypes" [ngValue]="gt">{{gt.gradeName}}</option>
</select>
      <div class="font6" *ngIf="f.submitted && !schoolType.valid" class="help-block">학교구분을 선택해주세요.</div>
    </div>

    <div class="form-group" [ngClass]="{'has-error': f.submitted && !affiliation.valid }">
      <label for="affiliation" class="font4">계열</label>
      <select class="form-control" name="affiliation" [(ngModel)]="user.affiliation" #affiliation="ngModel" required>
            <option *ngIf="user.affiliation == ''">계열 선택</option>
        <option *ngFor = "let a of affiliations" [ngValue]="a.value">{{a.display}}</option>
</select>
      <div class="font6" *ngIf="f.submitted && !affiliation.valid" class="help-block">계열을 선택해주세요.</div>
    </div>

    <p class="font2"><span class="font3">STEP2.</span>과외정보(필수)</p>

    <div class="form-group" [ngClass]="{'has-error': f.submitted && !subject.valid }">
      <label for="subject" class="font4">과목</label>
      <select class="form-control" name="subject" [(ngModel)]="user.subject" #subject="ngModel" required>
            <option *ngIf="user.subject == ''">과목 선택</option>
        <option *ngFor="let s of subjects" [ngValue]="s.value">{{s.display}}</option>
</select>
      <div class="font6" *ngIf="f.submitted && !subject.valid" class="help-block">과목을 선택해주세요.</div>
    </div>

    <div class="form-group" [ngClass]="{'has-error': f.submitted && !district.valid }">
      <label for="district" class="font4">지역</label>
      <input class="font5" placeholder="ex)서울시 서초구 서초동" type="text" class="form-control" name="district" [(ngModel)]="user.district"
        #district="ngModel" required/>
      <div class="font6" *ngIf="f.submitted && !district.valid" class="help-block">지역은 필수항목 입니다.</div>
    </div>

    <p class="font2"><span class="font3">STEP3.</span>연락처(필수)</p>
    <div class="form-group" [ngClass]="{'has-error': f.submitted && !name.valid }">
      <label for="name" class="font4">신청자 이름</label>
      <input *ngIf="currentUser == null" class="font5" placeholder="ex)김어몽" type="text" class="form-control" name="name" [(ngModel)]="user.name"
        #name="ngModel" required/>

      <div class="inv_div" *ngIf="currentUser">
        <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}}">
      </div>

      <div class="font6" *ngIf="f.submitted && !name.valid" class="help-block">이름은 필수항목 입니다.</div>
    </div>

    <div class="form-group" [ngClass]="{'has-error': f.submitted && !phone.valid }">
      <label for="phone" class="font4">연락처</label>
      <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/>

      <div class="inv_div" *ngIf="currentUser">
        <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}}">
      </div>

      <div *ngIf="f.submitted && !phone.valid" class="help-block">올바른 형식의 휴대폰번호를 입력해주세요.</div>
    </div>




    <div class="form-group" [ngClass]="{'has-error': f.submitted && !admissionCategoryUid.valid }">
      <input class="font5" type="hidden" class="form-control" name="admissionCategoryUid" [(ngModel)]="user.admissionCategoryUid"
        #admissionCategoryUid="ngModel" />
    </div>

    <div class="form-group" [ngClass]="{'has-error': f.submitted && !highschoolUid.valid }">
      <input class="font5" type="hidden" class="form-control" name="highschoolUid" [(ngModel)]="user.highschoolUid" #highschoolUid="ngModel"
      />
    </div>

    <div class="form-group" [ngClass]="{'has-error': f.submitted && !universityUid.valid }">
      <input class="font5" type="hidden" class="form-control" name="universityUid" [(ngModel)]="user.universityUid" #universityUid="ngModel"
      />
    </div>

    <div class="form-group" [ngClass]="{'has-error': f.submitted && !universityMajorUid.valid }">
      <input class="font5" type="hidden" class="form-control" name="universityMajorUid" [(ngModel)]="user.universityMajorUid" #universityMajorUid="ngModel"
      />
    </div>

    <div class="form-group" [ngClass]="{'has-error': f.submitted && !level.valid }">
      <input class="font5" type="hidden" class="form-control" name="level" [(ngModel)]="user.level" #level="ngModel" />
    </div>

    <div class="form-group" [ngClass]="{'has-error': f.submitted && !lecturePerWeek.valid }">
      <input class="font5" type="hidden" class="form-control" name="lecturePerWeek" [(ngModel)]="user.lecturePerWeek" #lecturePerWeek="ngModel"
      />
    </div>

    <div class="form-group" [ngClass]="{'has-error': f.submitted && !lecturePerMinute.valid }">
      <input class="font5" type="hidden" class="form-control" name="lecturePerMinute" [(ngModel)]="user.lecturePerMinute" #lecturePerMinute="ngModel"
      />
    </div>

    <div class="form-group" [ngClass]="{'has-error': f.submitted && !priceStart.valid }">
      <input class="font5" type="hidden" class="form-control" name="priceStart" [(ngModel)]="user.priceStart" #priceStart="ngModel"
      />
    </div>

    <div class="form-group" [ngClass]="{'has-error': f.submitted && !priceEnd.valid }">
      <input class="font5" type="hidden" class="form-control" name="priceEnd" [(ngModel)]="user.priceEnd" #priceEnd="ngModel" />
    </div>

    <div class="form-group" [ngClass]="{'has-error': f.submitted && !message.valid }">
      <input class="font5" type="hidden" class="form-control" name="message" [(ngModel)]="user.message" #message="ngModel" />
    </div>

    <div class="form-group" [ngClass]="{'has-error': f.submitted && !email.valid }">
      <input class="font5" type="hidden" class="form-control" name="email" [(ngModel)]="user.email" #email="ngModel" />
    </div>


    <div class="form-group" [ngClass]="{'has-error': f.submitted && !grade.valid }">
      <input class="font5" type="hidden" class="form-control" name="grade" [(ngModel)]="user.grade" #grade="ngModel" />
    </div>



    <p class="font6">용도 외에 사용 및 저장되지 않으며, <br><a href="#">개인정보 취급방침</a>의 의거해 처리됩니다.<br>
      <a href="#">개인정보 취급방침</a>과 입력하신 정보를 추천 용도에 사용하는데 <br>동의하신다면 추천받기를 눌러주세요! </p>

    <button id="recommend-btn" [disabled]="loading">선생님 추천받기</button>
    <img *ngIf="loading" src="data:image/gif;base64,R0lGODlhEAAQAPIAAP///wAAAMLCwkJCQgAAAGJiYoKCgpKSkiH/C05FVFNDQVBFMi4wAwEAAAAh/hpDcmVhdGVkIHdpdGggYWpheGxvYWQuaW5mbwAh+QQJCgAAACwAAAAAEAAQAAADMwi63P4wyklrE2MIOggZnAdOmGYJRbExwroUmcG2LmDEwnHQLVsYOd2mBzkYDAdKa+dIAAAh+QQJCgAAACwAAAAAEAAQAAADNAi63P5OjCEgG4QMu7DmikRxQlFUYDEZIGBMRVsaqHwctXXf7WEYB4Ag1xjihkMZsiUkKhIAIfkECQoAAAAsAAAAABAAEAAAAzYIujIjK8pByJDMlFYvBoVjHA70GU7xSUJhmKtwHPAKzLO9HMaoKwJZ7Rf8AYPDDzKpZBqfvwQAIfkECQoAAAAsAAAAABAAEAAAAzMIumIlK8oyhpHsnFZfhYumCYUhDAQxRIdhHBGqRoKw0R8DYlJd8z0fMDgsGo/IpHI5TAAAIfkECQoAAAAsAAAAABAAEAAAAzIIunInK0rnZBTwGPNMgQwmdsNgXGJUlIWEuR5oWUIpz8pAEAMe6TwfwyYsGo/IpFKSAAAh+QQJCgAAACwAAAAAEAAQAAADMwi6IMKQORfjdOe82p4wGccc4CEuQradylesojEMBgsUc2G7sDX3lQGBMLAJibufbSlKAAAh+QQJCgAAACwAAAAAEAAQAAADMgi63P7wCRHZnFVdmgHu2nFwlWCI3WGc3TSWhUFGxTAUkGCbtgENBMJAEJsxgMLWzpEAACH5BAkKAAAALAAAAAAQABAAAAMyCLrc/jDKSatlQtScKdceCAjDII7HcQ4EMTCpyrCuUBjCYRgHVtqlAiB1YhiCnlsRkAAAOwAAAAAAAAAAAA=="
    />
  </form>

我的组件

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 => {
                    this.Rec_Tea.extractData(data);
                    this.childModal.show();
                },
                error => {
                    this.loading = false;
                    this.Rec_Tea.handleError(this.errorMessage)
                });
    }

当我用这个的时候

<div>Form details:-</div>
<pre>Is form valid?: <br>{{f.valid | json}}</pre>
<pre>Is form submitted?: <br>{{f.submitted | json}}</pre>
<pre>submitted value: <br>{{f.value | json}}</pre>

一切正常

但是每当我提交表单时，我都会收到这些错误

请帮我解决这个问题。谢谢。

Answer 1

由于 f 是 NgForm. 类型，要检查表单的有效性，只需使用 f.valid