Простой пример ngForm в angular 6 с полем выбора - PullRequest
Новая
       12

Простой пример ngForm в angular 6 с полем выбора

0 голосов
/ 11 октября 2018

Угловой 6 проверки формы простой пример.С проверкой электронной почты и окном выбора (выпадающий список) .ng Простой пример на угловом 6 с окном выбора

1 Ответ

0 голосов
/ 11 октября 2018

Используйте ngForm.Импортируйте его свой component.module.ts (файл модуля) 

import { FormsModule } from '@angular/forms';

Добавьте его в свой шаблон компонента 

<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>

Добавьте его в свой 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;
}

Имя Чена выбрано в поле выбора и адрес электронной почты действителен.Это хорошо работает.И я буду его использовать.

...