如何在表单之外检查angular中输入的有效性，而不检查ng-invalid？

在Angular中，可以使用模板驱动表单或响应式表单来检查输入的有效性。无论使用哪种类型的表单，都可以在表单之外进行有效性检查，而不仅仅是检查ng-invalid。

对于模板驱动表单，可以使用ngModel指令来获取表单控件的引用，并通过该引用访问控件的有效性状态。以下是一个示例：

<form #myForm="ngForm">
  <input type="text" name="myInput" [(ngModel)]="myValue" required>
</form>

<button (click)="checkValidity()">检查有效性</button>

import { Component } from '@angular/core';

@Component({
  selector: 'app-my-component',
  templateUrl: './my-component.component.html',
  styleUrls: ['./my-component.component.css']
})
export class MyComponent {
  myValue: string;

  checkValidity() {
    const control = this.myForm.controls['myInput'];
    if (control.valid) {
      console.log('输入有效');
    } else {
      console.log('输入无效');
    }
  }
}

对于响应式表单，可以使用get()方法来获取表单控件的引用，并通过该引用访问控件的有效性状态。以下是一个示例：

<form [formGroup]="myForm">
  <input type="text" formControlName="myInput" required>
</form>

<button (click)="checkValidity()">检查有效性</button>

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

@Component({
  selector: 'app-my-component',
  templateUrl: './my-component.component.html',
  styleUrls: ['./my-component.component.css']
})
export class MyComponent implements OnInit {
  myForm: FormGroup;

  constructor(private formBuilder: FormBuilder) { }

  ngOnInit() {
    this.myForm = this.formBuilder.group({
      myInput: ['', Validators.required]
    });
  }

  checkValidity() {
    const control = this.myForm.get('myInput');
    if (control.valid) {
      console.log('输入有效');
    } else {
      console.log('输入无效');
    }
  }
}

这样，无论是模板驱动表单还是响应式表单，都可以在表单之外检查输入的有效性。