我正在尝试创建一个来自验证的方式,当提交表单时,无效字段必须用红色突出显示,但我不确定我错在哪里可以有人帮助我
我的模板,
<form id="login-form" name="login-form" class="nobottommargin" [formGroup]="form" (ngSubmit)="onSubmit(form.value)">
<p *ngIf="activation" class="activation">We have sent an activation link to your email</p>
<div class="form-group col-sm-offset-2">
<label class="radio-inline">
<input type="radio" [formControl]="form.controls['type']" value = 'personal' name="optradio">Personal
</label>
<label class="radio-inline">
<input type="radio" [formControl]="form.controls['type']" value = 'professional' name="optradio">Professional
</label>
</div>
<div class="form-group">
<input type="text" [formControl]="form.controls['firstname']" id="login-form-firstnamee" name="login-form-firstname" value="" placeholder="First Name" class="sm-form-control not-dark formcontrolheight required">
</div>
<div class="clear"></div>
<div class="col-sm-12 labeltopmargin nopadding">
<button class="col-xs-12 button buttonmeroon button-mini nomargin" id="login-form-submit" name="login-form-submit" value="login">Sign Up</button>
</div>
<div class="clear"></div>
</form>
我的,
export class SignUp {
http: Http;
emailfailure: any;
activation: any;
profilefailure: any;
form:any;
constructor(fbld: FormBuilder, http: Http, public router: Router) {
this.http = http;
this.form = fbld.group({
firstname: ['', Validators.required],
lastname: ['', Validators.required],
profilename: ['', Validators.required],
email: ['', Validators.required],
password: ['', Validators.required],
repeatpassword: ['', Validators.required],
image: [''],
phone: ['', phoneValidator],
type: ['',],
}
答案 0 :(得分:0)
当它不符合Validator要求时,您可以使用添加到输入中的.ng-invalid类。
您还可以根据表单状态显示一些错误消息:
<div class="error message" *ngIf="!form.valid">Your message</div>
答案 1 :(得分:0)
这是角度2中的简单表格验证
<form #heroForm="ngForm">
<div class="form-group">
<label for="name">Name</label>
<input type="text" class="form-control" id="name"
required
[(ngModel)]="info.name" name="name"
#name="ngModel" >
<span *ngIf="!name.valid && !name.pristine" style="color:red;"> <span>name is Required</span></span>
</div>
<div class="form-group">
<label for="alterEgo">Alter Ego</label>
<input type="text" class="form-control" id="alterEgo"
[(ngModel)]="info.age" name="alterEgo" >
</div>
<button type="button" class="btn btn-default" (click)="enter()">ENTER</button>