您好我正在使用表单,但由于一些不可理解的原因,它给了我一个错误
“无法读取未定义的'有效'的属性”
这些是我的代码
我的组件模板
<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>
一切都正常显示
请帮我解决这个问题..谢谢。
答案 0 :(得分:0)
请尝试更新此行,如下所示
<form name="form" (ngSubmit)="f.valid && recommend(f.value, f.valid)" #f="ngForm" novalidate>
使用f.form.valid
f.valid
答案 1 :(得分:0)
由于f是NgForm类型,要检查表单的有效性,只需使用f.valid