本文介绍了带有选择框的 angular 6 中的 ngForm 简单示例的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
限时送ChatGPT账号..Angular 6 表单验证简单示例.使用电子邮件验证和选择框(下拉).ngForm 带有选择框的 angular 6 简单示例
解决方案使用 ngForm.导入你的 component.module.ts(module file)
import { FormsModule } from '@angular/forms';
将其添加到您的组件模板
添加你的component.ts
allnames = [{name_id: 1,姓名:'约翰'}, {name_id: 2,名称:'陈娜'}, {name_id: 3,名称:'杰克'}]模型:任何={};ngOnInit() {this.model.name_id = 2;}
在选择框中选择了名称 Chena 并且电子邮件有效.它工作得很好.我会用的.
Angular 6 form validation simple example. With email validation and select box(drop down).ngForm simple example in angular 6 with select box
解决方案Use ngForm. Import it your component.module.ts(module file)
import { FormsModule } from '@angular/forms';
Add it your component template
<form role="form" (ngSubmit)="f.form.valid && onSubmit()" #f="ngForm" novalidate>
<select name="name_id" [(ngModel)]="model.name_id" #name_id="ngModel" [ngClass]="{ 'is-invalid': f.submitted && name_id.invalid }" required>
<option value="" disabled selected>Select Name</option>
<option *ngFor="let name of allnames" [value]="name.name_id">{{name.name}}</option>
</select>
<div *ngIf="f.submitted && name_id.invalid" class="invalid-feedback">
<div *ngIf="name_id.errors.required">Name is required</div>
</div>
<input type="email" placeholder="Email" name="email" [(ngModel)]="recoverModel.email" #email="ngModel" pattern="^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$" [ngClass]="{ 'is-invalid': recoverForm.submitted && email.invalid }" required />
<div *ngIf="recoverForm.submitted && email.invalid" class="invalid-feedback">
<div *ngIf="email.errors.required">Email is required</div>
<div *ngIf="email.errors.pattern">Email is invalid</div>
</div>
<button type="submit">save</button>
</form>
Add it your component.ts
allnames = [{
name_id: 1,
name: 'Jhon'
}, {
name_id: 2,
name: 'Chena'
}, {
name_id: 3,
name: 'Jack'
}]
model: any = {};
ngOnInit() {
this.model.name_id = 2;
}
The name Chena is selected in select box and email valid. It's work well. And i will use it.
这篇关于带有选择框的 angular 6 中的 ngForm 简单示例的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
更多推荐
[db:关键词]
发布评论