Angular 8 反应式表单验证答案

【问题标题】：Angular 8 reactive form validationAngular 8 反应式表单验证
【发布时间】：2020-12-05 09:03:39
【问题描述】：

我在 CustomerAdd.html 中使用反应式表单。

<form [formGroup]="CustomerProfileModel.FormCommonGroup">
        <div class="col-12 tab-content">
            <div class="row">
              <div class="col-md-10">
                <div class="form-group row m-b-10 m-t-20">
                  <label class="col-2 text-md-right col-form-label">Legal Name *</label>
                  <div class="col-4">
                    <input type="text" name="CommonLegalNameControl" required minlength="4" placeholder="" class="form-control" formControlName="CommonLegalNameControl" [(ngModel)]="CustomerProfileModel.LegalName">
                    <div *ngIf="CommonLegalNameControl?.invalid && (CommonLegalNameControl?.dirty || CommonLegalNameControl?.touched)" class="alert alert-danger">
                      <div *ngIf="CommonLegalNameControl?.errors.required">
                        Name is required.
                      </div>
                      <div *ngIf="CommonLegalNameControl?.errors.minlength">
                        Name must be at least 4 characters long.
                      </div>
                      <div *ngIf="CommonLegalNameControl.errors.forbiddenName">
                        Name cannot be Bob.
                      </div>
                    </div>
                  </div>
                </div>
                <!-- end form-group row -->
                <!-- begin form-group row -->
                <div class="form-group row m-b-10">
                  <div class="col-md-4 offset-md-2">
                    <!-- <input class="btn btn-sm btn-primary m-r-5" [disabled]="!(CustomerProfileModel.FormCommonGroup.valid)" (click)="AddCompany()" type=button value="Add Customer" /> -->
                    <input class="btn btn-sm btn-primary m-r-5" (click)="AddCompany()" type=button value="Add Customer" />
                    <a [routerLink]="['/CustomerProfile']" class="btn btn-sm btn-default">Cancel</a>
                  </div>
                </div>
              </div>
              <!-- end panel -->
            </div>                
          </div>
        </div>
      </form>

这是我的模型文件 Customer.ts。

import {
  NgForm,
  FormGroup,
  FormControl,
  Validators,
  FormBuilder
} from '@angular/forms'

export class Customer {
  LegalName: string = "";
  FormCommonGroup: FormGroup = null;
  constructor() {
    var _builder = new FormBuilder();
    this.FormCommonGroup = _builder.group({}); //Use the builder to create

    //control --> validation and 1 validation
    this.FormCommonGroup.addControl("CommonLegalNameControl",
      new FormControl('', Validators.required));
  }
}

正如我在下面的 CustomerAdd.html 上所说的那样。

<input type="text" name="CommonLegalNameControl" required minlength="4" placeholder="" class="form-control" formControlName="CommonLegalNameControl" [(ngModel)]="CustomerProfileModel.LegalName">
                <div *ngIf="CommonLegalNameControl?.invalid && (CommonLegalNameControl?.dirty || CommonLegalNameControl?.touched)" class="alert alert-danger">
                  <div *ngIf="CommonLegalNameControl?.errors.required">
                    Name is required.
                  </div>
                  <div *ngIf="CommonLegalNameControl?.errors.minlength">
                    Name must be at least 4 characters long.
                  </div>
                  <div *ngIf="CommonLegalNameControl.errors.forbiddenName">
                    Name cannot be Bob.
                  </div>
                </div>

这似乎不起作用，我也对 click 方法进行了同样的操作。
https://stackblitz.com/edit/angular-7-reactive-form-validation?file=app%2Fapp.component.html
https://stackblitz.com/edit/angular-8-reactive-form-validation?file=app%2Fapp.component.html
在我的表单中，它们都没有按预期工作。

更新 1： 下面是我的 CustomerAdd.ts 文件。

import { Component, Input, OnInit, ViewEncapsulation } from '@angular/core';
import { Customer } from '../_models/Customer '
@Component({
  selector: 'CustomerProfileAdd',
  templateUrl: './CustomerProfileAdd.html',
  styleUrls: ['./CustomerProfileAdd.css'],
})

export class CustomerProfileAdd implements OnInit {
  public CustomerProfileModel: Customer = new Customer();
  constructor() {
  }

  async ngOnInit() {    
    await this.CustomerProfileModel;
  }

  AddCompany() {
    this.submitted = true;

    // stop here if form is invalid
    if (this.CustomerProfileModel.FormCommonGroup.invalid) {
      return;
    }
  }
}

【问题讨论】：

a) “未按预期工作”是什么意思？ b）在模型类上定义表单似乎是错误的地方，它应该在您的 CustomerAdd.ts 组件类中。 b) 你的组件类是什么样子的？
以上两个 stackblitz 链接与验证完美结合，什么不适合你？
@KamranKhatti 这些在我的表单中不起作用。
@ChristophLütjen 我也会更新我的 CustomerAdd.ts 文件。
@NamanKumar 那么您应该在 stackblitz 上添加您的示例，这可以帮助我们进行调试，请将您的代码移动到 stackblitz。

标签： angular typescript angular8 angular-reactive-forms

【解决方案1】：

当我再次关注此网址时。
https://stackblitz.com/edit/angular-8-reactive-form-validation?file=app%2Fapp.component.html
现在，当我努力完成时，我错过了一些小点。

 <input type="text" formControlName="lastName" class="form-control" [ngClass]="{ 'is-invalid': submitted && f.lastName.errors }" />
                    <div *ngIf="submitted && f.lastName.errors" class="invalid-feedback">
                        <div *ngIf="f.lastName.errors.required">Last Name is required</div>
                    </div>

我所做的一切都很好，因为我错过了这一部分。 [ngClass]="{ 'is-invalid': submitted && f.lastName.errors }" 在输入标签中我给了这个以便工作。在 CustomerAdd.ts 我给了这个。

// convenience getter for easy access to form fields
    get f() { return this.CustomerProfileModel.FormCommonGroup.controls; }

【讨论】：