如何在 angularjs2 中生成表单验证答案

【问题标题】：How to produce form validations in angularjs2如何在 angularjs2 中生成表单验证
【发布时间】：2016-08-23 10:48:57
【问题描述】：

我正在尝试以这样的方式创建验证，即当提交表单时，无效字段必须用红色突出显示，但我不确定我错在哪里，有人可以帮助我

我的模板，

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

我的 ts，

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: ['',],
    }

【问题讨论】：

标签： html angular typescript formvalidation-plugin

【解决方案1】：

当它不符合验证器要求时，您可以使用添加到输入中的 .ng-invalid 类。

您还可以根据您的表单状态显示一些错误消息：

<div class="error message" *ngIf="!form.valid">Your message</div>

【讨论】：

您可能想阅读this documentation on the new FormsModule。有一个非常详尽的示例说明如何完全按照您的要求进行操作。

【解决方案2】：

这是 Angular 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>

【讨论】：