Создание формы в Angular через Template Driven подход

В данном уроке будем изучать создание формы в Angular фреймворке.У нас уже есть подготовленная форма которую можно скачать по этой ссылке и выглядит она вот так:

В рамках данного урока будем инициализировать форму при помощи фреймворка Angular и будем валидировать её двумя способами:

Через шаблон (Template Driven)
То есть вся логика по валидация форм будет написана в шаблоне.
Реактивный подход
Он позволяет обрабатывать всю форму не меняя html, а через написание кода внутри компонента.

Рассмотрим обе возможности.

TD – Создаём форму

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html'
})
export class AppComponent {
  answers = [{
    type: 'yes',
    text: 'Да'
  }, {
    type: 'no',
    text: 'Нет'
  }];
  // объект answers будем использовать для радио кнопок
}

import { Component } from '@angular/core';

@Component({

selector: 'app-root',

templateUrl: './app.component.html'

})

export class AppComponent {

answers = [{

type: 'yes',

text: 'Да'

}, {

type: 'no',

text: 'Нет'

}];

// объект answers будем использовать для радио кнопок

}

и html формы

<div class="col-xs-8 col-xs-offset-2">
  <form>
    <div class="form-group">
      <label>Email</label>
      <input type="text" class="form-control">
    </div>
    <div class="form-group">
      <label>Пароль</label>
      <input type="password" class="form-control">
    </div>
    <div class="form-group">
      <label>Выберите страну</label>
      <select class="form-control">
        <option value="ru">Россия</option>
        <option value="by">Белоруссия</option>
        <option value="ua">Украина</option>
      </select>
    </div>
    <div class="radio" *ngFor="let ans of answers">
      <label>
        <input type="radio" [value]="ans.type"> {{ans.text}}
      </label>
    </div>
    <button class="btn btn-success" type="submit">Сохранить</button>
  </form>
</div>

<form>

<label>Email</label>

</div>

<label>Пароль</label>

</div>

<label>Выберите страну</label>

<option value="ru">Россия</option>

<option value="by">Белоруссия</option>

<option value="ua">Украина</option>

</select>

</div>

<label>

<input type="radio" [value]="ans.type"> {{ans.text}}

</label>

</div>

<button class="btn btn-success" type="submit">Сохранить</button>

</form>

</div>

Это скелет на чём будем дальше писать код. Начнём!

Для того чтобы указать Angular что наш <input> является элементом формы (он должен за ним следить) то мы должны прописать ему специальную директиву ngModel:

<div class="form-group">
    <label>Email</label>
    <input
        type="text"
        class="form-control"
        ngModel
    >
</div>

<label>Email</label>

<input

type="text"

class="form-control"

ngModel

</div>

Теперь зададим название данному полю:

<input
    type="text"
    class="form-control"
    ngModel
    name="email"
>

<input

type="text"

class="form-control"

ngModel

name="email"

теперь сделаем то же самое для пароля:

<input
    type="password"
    class="form-control"
    ngModel
    name="pass"
>

<input

type="password"

class="form-control"

ngModel

name="pass"

и для select и радио кнопок так-же:

<select class="form-control" ngModel name="country">
    <option value="ru">Россия</option>
    /* больше опции */
</select>

<option value="ru">Россия</option>

/* больше опции */

</select>

<input
    type="radio"
    [value]="ans.type"
    ngModel
    name="answer"
>

<input

type="radio"

[value]="ans.type"

ngModel

name="answer"

Обработчик формы

Чтобы обработать событие отправки формы, мы должны указать специальный метод к тэгу <form>

<form #form="ngForm" (ngSubmit)="this.submitForm(form)">
<!-- #form это локальная референция на форму -->

1 2	<form #form="ngForm" (ngSubmit)="this.submitForm(form)"> <!-- #form это локальная референция на форму -->

Теперь давайте создадим функцию submitForm.

submitForm(form: NgForm) {
   //интерфейс NgForm нужно импортировать из @angular/forms
   console.log('Submited!', form);
}

submitForm(form: NgForm) {

//интерфейс NgForm нужно импортировать из @angular/forms

console.log('Submited!', form);

}

Теперь при событий submit получим объект формы:

Обязательно!
Чтобы у Вас всё работало в app.module.ts должен быть подключен FormsModule:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';

import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    FormsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

import { BrowserModule } from '@angular/platform-browser';

import { NgModule } from '@angular/core';

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

import { AppComponent } from './app.component';

@NgModule({

declarations: [

AppComponent

imports: [

BrowserModule,

FormsModule

providers: [],

bootstrap: [AppComponent]

})

export class AppModule { }

Это всё, Мы получили объект формы и можем с ним работать дальше, файлы с кодом из урока есть тут.

Создание формы в Angular через Template Driven подход

TD – Создаём форму

Обработчик формы

Рекомендую для изучения Angular

Добавить комментарий Отменить ответ

TD – Создаём форму

Обработчик формы

Рекомендую для изучения Angular

Похожие статьи:

Добавить комментарий Отменить ответ