在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('输入无效');
}
}
}
这样,无论是模板驱动表单还是响应式表单,都可以在表单之外检查输入的有效性。
AngularJS ng-model 指令
ng-model 指令用于绑定应用程序数据到HTML 控制器(input,select,textarea)的值
ng-model指令
ng-model指令可以将输入域的值与AngularJS 创建的变量绑定。
实例:
领取专属 10元无门槛券
手把手带您无忧上云