在Angular 2中,可以使用响应式表单来实现按钮验证。以下是一个示例解决方法:
import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
@Component({
selector: 'app-my-form',
templateUrl: './my-form.component.html',
styleUrls: ['./my-form.component.css']
})
export class MyFormComponent implements OnInit {
myForm: FormGroup;
constructor(private fb: FormBuilder) { }
ngOnInit() {
this.myForm = this.fb.group({
name: ['', Validators.required],
email: ['', [Validators.required, Validators.email]]
});
}
submitForm() {
// 处理表单提交的逻辑
}
}
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { ReactiveFormsModule } from '@angular/forms';
import { MyFormComponent } from './my-form.component';
@NgModule({
declarations: [MyFormComponent],
imports: [
CommonModule,
ReactiveFormsModule
],
exports: [MyFormComponent]
})
export class MyFormModule { }
这样,当表单的输入有效时,提交按钮将处于可用状态。用户只能在表单输入有效时提交表单。