我想编写可用于任何角度形式的通用验证-法向反应已经完成并且可以正常工作

Question

我想编写可以以任何角度形式使用的通用验证-法向反应已经完成并且可以正常工作。任何人都可以解决此问题。

  import { Component } from '@angular/core';
  import { FormBuilder, FormGroup, Validators } from '@angular/forms';

// import custom validator to validate that password and confirm password fields match
   import { MustMatch } from './_helpers/must-match.validator';

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

      registerForm: FormGroup;
        submitted = false;
        constructor(private formBuilder: FormBuilder) { }
        ngOnInit() {
          this.registerForm = this.formBuilder.group({
              title: ['', Validators.required],
              firstName: ['', Validators.required],
              lastName: ['', Validators.required],
              email: ['', [Validators.required, Validators.email]],
              password: ['', [Validators.required, Validators.minLength(6)]],
              confirmPassword: ['', Validators.required],
              acceptTerms: [false, Validators.requiredTrue]
          }, {
              validator: MustMatch('password', 'confirmPassword')
          });
      }

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

      onSubmit() {
        this.submitted = true;

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

        // display form values on success
        alert('SUCCESS!! :-)\n\n' + JSON.stringify(this.registerForm.value, null, 4));
    }

    onReset() {
      this.submitted = false;
      this.registerForm.reset();
    }
    }

<!-- language: lang-html -->

    <div class="card m-3">
      <h5 class="card-header">Form Validation</h5>
      <div class="card-body">
          <form [formGroup]="registerForm" (ngSubmit)="onSubmit()">
              <div class="form-row">
                  <div class="form-group col">
                      <label>Title</label>
                      <select formControlName="title" class="form-control" [ngClass]="{ 'is-invalid': submitted && f.title.errors }">
                          <option value=""></option>
                          <option value="Mr">Mr</option>
                          <option value="Mrs">Mrs</option>
                          <option value="Miss">Miss</option>
                          <option value="Ms">Ms</option>
                      </select>
                      <div *ngIf="submitted && f.title.errors" class="invalid-feedback">
                          <div *ngIf="f.title.errors.required">Title is required</div>
                      </div>
                  </div>
                  <div class="form-group col-5">
                      <label>First Name</label>
                      <input type="text" formControlName="firstName" class="form-control" [ngClass]="{ 'is-invalid': submitted && f.firstName.errors }" />
                      <div *ngIf="submitted && f.firstName.errors" class="invalid-feedback">
                          <div *ngIf="f.firstName.errors.required">First Name is required</div>
                      </div>
                  </div>
                  <div class="form-group col-5">
                      <label>Last Name</label>
                      <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>
                  </div>
              </div>
              <div class="form-group">
                  <label>Email</label>
                  <input type="text" formControlName="email" class="form-control" [ngClass]="{ 'is-invalid': submitted && f.email.errors }" />
                  <div *ngIf="submitted && f.email.errors" class="invalid-feedback">
                      <div *ngIf="f.email.errors.required">Email is required</div>
                      <div *ngIf="f.email.errors.email">Email must be a valid email address</div>
                  </div>
              </div>
              <div class="form-row">
                  <div class="form-group col">
                      <label>Password</label>
                      <input type="password" formControlName="password" class="form-control" [ngClass]="{ 'is-invalid': submitted && f.password.errors }" />
                      <div *ngIf="submitted && f.password.errors" class="invalid-feedback">
                          <div *ngIf="f.password.errors.required">Password is required</div>
                          <div *ngIf="f.password.errors.minlength">Password must be at least 6 characters</div>
                      </div>
                  </div>
                  <div class="form-group col">
                      <label>Confirm Password</label>
                      <input type="password" formControlName="confirmPassword" class="form-control" [ngClass]="{ 'is-invalid': submitted && f.confirmPassword.errors }" />
                      <div *ngIf="submitted && f.confirmPassword.errors" class="invalid-feedback">
                          <div *ngIf="f.confirmPassword.errors.required">Confirm Password is required</div>
                          <div *ngIf="f.confirmPassword.errors.mustMatch">Passwords must match</div>
                      </div>
                  </div>
              </div>
              <div class="form-group form-check">
                  <input type="checkbox" formControlName="acceptTerms" id="acceptTerms" class="form-check-input" [ngClass]="{ 'is-invalid': submitted && f.acceptTerms.errors }" />
                  <label for="acceptTerms" class="form-check-label">Accept Terms & Conditions</label>
                  <div *ngIf="submitted && f.acceptTerms.errors" class="invalid-feedback">Accept Ts & Cs is required</div>
              </div>
              <div class="text-center">
                  <button class="btn btn-primary mr-1">Register</button>
                  <button class="btn btn-secondary" type="reset" (click)="onReset()">Cancel</button>
              </div>
          </form>
      </div>
    </div>

Answer 1

因此，您可以使用AbstractControl进行自定义验证