Angular6 使用选择框在angular 6中生成简单示例
Angular 6表单验证简单示例。使用电子邮件验证和选择框(下拉)。ngForm angular 6中的简单示例使用选择框使用ngForm。将其导入到component.module.ts(模块文件)中 将其添加到组件模板中Angular6 使用选择框在angular 6中生成简单示例,angular6,angularjs-ng-form,Angular6,Angularjs Ng Form,Angular 6表单验证简单示例。使用电子邮件验证和选择框(下拉)。ngForm angular 6中的简单示例使用选择框使用ngForm。将其导入到component.module.ts(模块文件)中 将其添加到组件模板中 <form role="form" (ngSubmit)="f.form.valid && onSubmit()" #f="ngForm" novalidate> <select name="name_id" [(ngModel)
<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>
在选择框中选择名称Chena,并且电子邮件有效。很好用。我会用它
<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>
allnames = [{
name_id: 1,
name: 'Jhon'
}, {
name_id: 2,
name: 'Chena'
}, {
name_id: 3,
name: 'Jack'
}]
model: any = {};
ngOnInit() {
this.model.name_id = 2;
}