在按钮单击时验证表单角度

Question

因为我是 Angular 4.0 的新手，我被困在验证中 我有一个包含两个字段的表单 这是表格

<form action="my-account.html" method="post" class="form-horizontal">
            <div class="form-group">
                <label for="exampleInputEmail1" class="col-sm-3">User name</label>
                <div class="col-sm-9">
                <input type="email" class="form-control" id="exampleInputEmail1"  placeholder="Username" required>

                </div>
            </div>
            <div class="form-group">
                <label for="exampleInputPassword1" class="col-sm-3">Password</label>
                <div class="col-sm-9">
                    <input type="password" class="form-control" id="exampleInputPassword1"  placeholder="Password" required>

                </div>
            </div>

            <div class="form-group">
                <div class="col-sm-offset-3 col-sm-9 ">
                    <button type="submit" class="btn btn-primary btn-sm"  [routerLink]="['/dashboard']">Submit</button>
                    <button type="submit" class="btn btn-primary btn-sm">I Forgot My Password</button>
                </div>
            </div>
        </form>

我想对提交按钮进行验证

**<button type="submit" class="btn btn-primary btn-sm"  [routerLink]="['/dashboard']">Submit</button>**

以最简单的方式，我该怎么做呢？

Answer 1

使用此链接并通过解释验证的整个场景

https://www.toptal.com/angular-js/angular-4-forms-validation

<form (ngSubmit)="onSubmit(loginForm)" [formGroup]="loginForm" novalidate class="form-horizontal">
  <div class="form-group">
      <label for="exampleInputEmail1" class="col-sm-3">User name</label>
      <div class="col-sm-9">
      <input type="email" formControlName="username" class="form-control" id="exampleInputEmail1"  placeholder="Username" required>
     <!-- put your validations here -->
      </div>
  </div>
  <div class="form-group">
      <label for="exampleInputPassword1" class="col-sm-3">Password</label>
      <div class="col-sm-9">
          <input type="password" formControlName="password" class="form-control" id="exampleInputPassword1"  placeholder="Password" required>
        <!-- put your validations here -->
      </div>
  </div>

  <div class="form-group">
      <div class="col-sm-offset-3 col-sm-9 ">
          <button type="submit" class="btn btn-primary btn-sm"  [disabled]="loginForm.$invalid">Submit</button>
          <button type="submit" class="btn btn-primary btn-sm">I Forgot My Password</button>
      </div>
  </div>
</form>

//在你的.ts文件中

 constructor(private fb: FormBuilder){}

ngOnInit() {
    this.profile = this.fb.group({
      userName: [null, [Validators.required]],
      password: [null, [Validators.required]]
    })
};