Angular 角反应验证

我是angular的新手，我想知道angular 6.0中的反应性验证是如何工作的，我正在尝试从过去两周开始进行验证，有人能帮我进行验证吗？教我怎么做

非常感谢您的帮助，谢谢：）

下面给出了HTML部分

<form class="form-horizontal" [formGroup]="profileForm" (ngSubmit)="onSubmit()">
  <div class="panel panel-primary">

    <div class="panel-heading">
      <h3 class="panel-title">C3</h3>
    </div>


  <div class="panel-body">
      <div class="form-group">
        <label class="col-sm-2 control-label" for="fullName">Full Name</label>
        <div class="col-sm-8">
          <input id="fullName" type="text" class="form-control" formControlName="firstName"
          [ngClass]="{ 'is-invalid': submitted && f.profileForm.errors }" >

          <div *ngIf="f.firstName.errors.required">First Name is required {{f.profileForm.errors}}</div>
          <div *ngIf=></div>
        </div>
      </div>

      <div class="form-group">
        <label class="col-sm-2 control-label" for="email">Email</label>
        <div class="col-sm-8">
          <input id="email" type="text" class="form-control" formControlName="EmailMe">
        </div>
      </div>

  </div>
    <div class="panel-footer">
      <button class="btn btn-primary" type="submit" [disabled]="!profileForm.valid">Save</button>
    </div>
  </div>
</form>
 <!--  -->

<router-outlet></router-outlet>

C3
全名
需要名字{{f.profileForm.errors}
电子邮件
拯救

在您访问的模板中的多个位置

f.proflieForm

但是f的定义是

get f() { return this.profileForm.controls; }

profileForm上的控件没有也称为profileForm的控件，您可能希望更像：

  <div class="form-group">
    <label class="col-sm-2 control-label" for="fullName">Full Name</label>
    <div class="col-sm-8">
      <input id="fullName" type="text" class="form-control" formControlName="firstName"
      [ngClass]="{ 'is-invalid': submitted && f.firstName.errors }" >

      <div *ngIf="f.firstName.errors?.required">First Name is required {{f.firstName.errors}}</div>
      <div *ngIf=></div>
    </div>
  </div>

全名
需要名字{{f.firstName.errors}

---

其他一切看起来都应该可以正常工作，但是您没有在电子邮件表单中添加任何错误字段，尽管您在表单控件中将其标记为所需。

您的验证检查似乎是错误的。在这里，尝试一下：

<form 
  class="form-horizontal" 
  [formGroup]="profileForm" 
  (ngSubmit)="onSubmit()">

  <div class="panel panel-primary">

    <div class="panel-heading">
      <h3 class="panel-title">C3</h3>
    </div>


    <div class="panel-body">

      <div class="form-group">
        <label 
          class="col-sm-2 control-label" 
          for="fullName">
          Full Name
        </label>

        <div class="col-sm-8">
          <input 
            id="fullName" 
            type="text" 
            class="form-control" 
            formControlName="firstName">
          <div 
            *ngIf="profileForm.controls['firstName'].touched && profileForm.controls['firstName'].errors.required"
            >
            First Name is required
          </div>
        </div>
      </div>

      ...

    </div>

    ...

  </div>

</form>

这是给你的裁判的一封信

---

嗨@AJT_82，你能给我推荐一些关于angular的好书吗？我会推荐官方angular教程，你可以从《英雄之旅》开始，它涵盖了最基本的东西。官方教程的好处是它们总是最新的：）谢谢你AJT--谢谢你，我不能给你投票，因为我只有一个声誉，但它很有效谢谢你的例子，它对我帮助很大，谢谢你如果你删除任何文本，它应该向你显示验证错误以及电子邮件，如果两者都经过验证，按钮需要启用Hi SiddAjmera，这是反应式表单验证吗？是的，我猜。如果它应用于一个反应式表单，那么它就是反应式表单验证。你怎么会不这么想？反应式表单验证的定义是什么？我不确定。它可以是相对的。所以我只是想确定一下。我不确定，我是angular的新手，我的背景是.net：(

<form 
  class="form-horizontal" 
  [formGroup]="profileForm" 
  (ngSubmit)="onSubmit()">

  <div class="panel panel-primary">

    <div class="panel-heading">
      <h3 class="panel-title">C3</h3>
    </div>


    <div class="panel-body">

      <div class="form-group">
        <label 
          class="col-sm-2 control-label" 
          for="fullName">
          Full Name
        </label>

        <div class="col-sm-8">
          <input 
            id="fullName" 
            type="text" 
            class="form-control" 
            formControlName="firstName">
          <div 
            *ngIf="profileForm.controls['firstName'].touched && profileForm.controls['firstName'].errors.required"
            >
            First Name is required
          </div>
        </div>
      </div>

      ...

    </div>

    ...

  </div>

</form>

input.ng-touched.ng-invalid {
  border: 1px solid red;
}