在Angular 5中,可以使用Angular的表单验证机制来验证和关闭Bootstrap 3模式表单。下面是一些步骤和代码示例:
<form class="form-horizontal" role="form" [formGroup]="myForm">
<div class="form-group">
<label for="name" class="col-sm-2 control-label">Name</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="name" formControlName="name">
</div>
</div>
<!-- 其他表单字段 -->
<button type="submit" class="btn btn-primary" [disabled]="myForm.invalid">Submit</button>
</form>
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 formBuilder: FormBuilder) { }
ngOnInit() {
this.myForm = this.formBuilder.group({
name: ['', Validators.required],
// 其他表单字段
});
}
}
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { MyFormComponent } from './my-form.component';
@NgModule({
declarations: [MyFormComponent],
imports: [
CommonModule,
FormsModule,
ReactiveFormsModule
],
exports: [MyFormComponent]
})
export class MyFormModule { }
<app-my-form></app-my-form>
这样,就可以在Angular 5中验证和关闭Bootstrap 3模式表单了。
领取专属 10元无门槛券
手把手带您无忧上云