Angular 反应式验证

Posted 2023-02-22

【中文标题】Angular 反应式验证

【英文标题】：Angular Reactive Validation

【发布时间】：2019-12-09 02:44:18

【问题描述】：

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

非常感谢您的帮助，谢谢:)

import  Component  from '@angular/core';
import  ReactiveFormsModule, FormsModule, FormGroup, FormBuilder, FormControl, Validators   from '@angular/forms';

@Component(
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
)
export class AppComponent 
  title = 'AngularProject';

  constructor(private fb:FormBuilder) 
  
  profileForm : FormGroup;
  submitted = false;
  ngOnInit(): void 
        this.profileForm= this.fb.group(
          firstName:['', [Validators.required]],
          EmailMe:['',[Validators.required]]
        );
  

  onSubmit():void
  
    this.submitted = true;
    if (this.profileForm.invalid) 
      return;
  
    console.log(this.profileForm.value);
    alert('SUCCESS!! :-)\n\n' + JSON.stringify(this.profileForm.value))
  
  get f()  
    return  this.profileForm.controls; 

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>

【问题讨论】：

angular.io/guide/form-validation#reactive-form-validation

嗨@AJT_82，你能给我推荐一本关于角度的好书吗？

我会推荐官方的angular教程，你可以从英雄之旅开始，它涵盖了最基本的东西。官方教程的好处是它们也总是最新的:)

谢谢AJT_82

【参考方案1】：

您的验证检查似乎有误。来，试试这个：

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

---

Angular 还会自动将 ng-invalid 和 ng-touched 等类应用于无效和触摸的表单控件。所以你可以利用它来简化你的 CSS：

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

这里有一个Working Sample StackBlitz 供您参考。

【讨论】：

谢谢你的例子，它对我帮助很大，谢谢

如果您删除任何文本，它应该向您显示验证错误以及电子邮件，如果两者都经过验证，则需要启用按钮

嗨 SiddAjmera，这是反应式表单验证吗？

是的，我猜。如果将其应用于响应式表单，则使其成为响应式表单验证。是什么让你不这么认为？顺便说一句，反应式表单验证的定义是什么？我不知道。它可以是相对的。所以只是要求确定。

我不确定，我是 Angular 新手，我的背景是 .net :(

【参考方案2】：

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

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>

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

【讨论】：

谢谢，我不能放弃投票，因为我只有 1 个声望，但它有效