Шаблонные формы. Шаблонные формы. angular form template

Шаблонные формы.

Open in new window

Шаблонные формы.

Ссылка на официальную документацию

Модель

export class Person {
  id: number;
  raw_name: string;
  first_name_ru: string;
  last_name_ru: string;
  surname_ru: string;
  first_name_kz: string;
  last_name_kz: string;
  surname_kz: string;
  first_name_lat: string;
  last_name_lat: string;
  surname_lat: string;
  role: string;
}

Импортируем библиотеку форм в модуле.

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

Компонент формы.

import { Component, OnInit, Input } from '@angular/core';
import { Person } from '../model';

@Component({
  selector: 'person-form',
  templateUrl: './form.component.html',
  styleUrls: ['./form.component.sass']
})
export class FormComponent implements OnInit {

  @Input() person: Person;

  constructor() { }

  ngOnInit() {
  }

  save(){
    console.log(this.person);
  }



}

Шаблон.

Переменная формы.

<form *ngIf="person" #personForm="ngForm">

Директива ngForm будет управлять всей формой.

Она содержит все элементы формы и отвечает за их связь с моделью и валидацию каждого и формы вцелом.

Добавляется автоматически если не указана явно.

Примеры элементов формы.

<input [(ngModel)]="person.surname_ru" name="surename_ru" type="text" class="form-control">

<select  [(ngModel)]="person.role"  class="form-control" name="role" required>
      <option *ngFor="let role of roles" [value]="role.value">{{role.name}}</option>
</select>

Обязательно добавление аттрибута name по которому ангуляр создаст элементы FormControl под капотом.

Отслеживание состояний элементов формы и валидация с ngModel.

CSS классы которые применяются автоматически.

  • Был фокус на контроле. ng-touched ng-untouched
  • Изменение значений. ng-dirty ng-pristine
  • Валидация. ng-valid ng-invalid

Добавим стили для валидации.

.ng-valid[required], .ng-valid.required
  border-left: 5px solid #42A948; /* green */


.ng-invalid:not(form)
  border-left: 5px solid #a94442; /* red */

Добавление сообщения валидации.

<input [(ngModel)]="person.surname_ru" name="surname_ru" type="text" class="form-control" required  #surname_ru="ngModel">
<div [hidden]="surname_ru.valid || surname_ru.pristine" class="alert alert-danger">
   Name is required
</div>

При этом мы определяем переменную #surname_ru=”ngModel” внутри контрола для обращения к нему извне.

Submit формы.

<form (ngSubmit)="onSubmit()" #heroForm="ngForm">

Отключим возможность сабмита при невалидной форме.

<button type="submit" class="btn btn-success" [disabled]="!personForm.form.valid">Submit</button>

Скроем форму после сабмита.

Шаблон.

<form *ngIf="person" [hidden]="submitted" (ngSubmit)="onSubmit()"  #personForm="ngForm">

Компонент.

export class FormComponent implements OnInit {

  //@Input() person: Person;
  submitted = false;
  private _person: Person;

  get person(): Person {
    return this._person;
  }
  @Input()
  set person(person: Person){
    this._person = person;
    this.submitted = false;
  }

Забираем данные из формы.

Other topics