В прошлом видео мы обсудили template driven формы в Angular. В этом уроке мы рассмотрим реактивные формы.

Реактивные формы более удобны для обработки большого количества полей и их взаимосвязей. Например, поля адреса могу быть частью большой формы регистрации. С помощью реактивных форм можно оперативно реагировать на изменения поля и реализовывать логику, исходя из этих изменений (например, валидировать почтовый индекс в зависимовсти от выбранной страны).

Основные классы реактивных форм — это FormGroup (контейнер формы), FormControl (класс определенного поля), FormBuilder (класс для быстрого создания контрола) и FormArray (удобен для возможности добавлять контролы динамически).

app.ts

import {Component, OnInit} from '@angular/core';
import {
  FormBuilder,
  FormControl,
  FormGroup,
  FormsModule,
  NonNullableFormBuilder,
  ReactiveFormsModule,
} from '@angular/forms';

interface LoginFormGroup {
  login: FormControl<string>;
  password: FormControl<string>;
  address: FormGroup<AddressFormGroup>;
}

interface AddressFormGroup {
  street: FormControl<string>;
  zipCode: FormControl<string>;
}

@Component({
  selector: 'app-root',
  imports: [
    FormsModule,
    ReactiveFormsModule

  ],
  templateUrl: './app.html',
  styleUrl: './app.scss'
})
export class App implements OnInit {

  protected form!: FormGroup<LoginFormGroup>;

  // protected form: FormGroup<LoginFormGroup> = new FormGroup<LoginFormGroup>({
  //   login: new FormControl<string>('', {
  //     nonNullable: true,
  //     validators: [Validators.required],
  //   }),
  //   password: new FormControl<string>('', {
  //     nonNullable: true,
  //     validators: [Validators.required]
  //   })
  // });

  constructor(private formBuilder: NonNullableFormBuilder) {
  }

  public ngOnInit() {
    this.form = this.formBuilder.group<LoginFormGroup>({
      login: new FormControl<string>(''),
      password: new FormControl<string>(''),
      address: new FormGroup<AddressFormGroup>({
        street: new FormControl<string>('Street'),
        zipCode: new FormControl<string>('1234')
      })
    })
  }

  protected submitForm() {
      console.log(this.form.value);
  }
}

app.html

<form [formGroup]="form" (ngSubmit)="submitForm()">
  <div>
    <label for="login">Login</label>
    <input type="text" id="login" name="login" formControlName="login">
    @if(form.controls.login.touched && form.controls.login.hasError('required')) {
      <span>Invalid control value</span>
    }
  </div>
  <div>
    <label for="password">Password</label>
    <input type="password" id="password" name="password" formControlName="password">
  </div>
  <button>Login</button>
</form>

Реактивные формы в Angular

app.ts

app.html

0 Comments

Submit a Comment Отменить ответ

Pin It on Pinterest