Как передать данные из элементов формы html в класс angular - PullRequest
Новая
       18

Как передать данные из элементов формы html в класс angular

0 голосов
/ 28 апреля 2020

Я использую angular 9 и мне нужно связать HTML данные форм с классом angular. У меня есть следующий angular класс: 

export interface MyData {
    field1: string,
    textArea1: string,
    textArea2: string
}

, и у меня есть следующий HTML код: 

<div class="modal-body">
        <label>Field1</label>
        <input type="text" class="form-control" aria-label="Process id"/>
        <label>TextArea1</label>
        <textarea class="form-control" aria-label="With textarea"></textarea>
        <label>TextArea2</label>
        <textarea class="form-control" aria-label="With textarea"></textarea>
      </div>

Как связать данные из формы HTML с MyData angular класс?

1 Ответ

1 голос
/ 28 апреля 2020

Почему бы вам не использовать Angular форму для этого?

В вашем компоненте: 

import { Component } from '@angular/core';
import { FormGroup, FormControl } from '@angular/forms';

@Component({
 selector: 'app-your-component-selector',
 templateUrl: './your-component.component.html',
 styleUrls: ['./your-component.component.css']
})
export class YourComponent {
 /** new form group instance */
 form: FormGroup;

 constructor() {}

 ngOnInit(): void {
     this.initForm();
 }

 initForm(): void {
    /** field1, textArea1, textArea2 are form control instances */
    this.form = new FormGroup({
        field1: new FormControl(''),
        textArea1: new FormControl(''),
        textArea2: new FormControl(''),
    });
 }

 onSubmit(): void {
   // code here after submit
   console.info(this.form.value);
 }
}

Группа форм отслеживает состояние и изменения для каждого из своих элементов управления, поэтому если один из элементов управления изменяется, родительский элемент управления также генерирует новое состояние или изменение значения.

В вашем шаблоне: 

<div class="modal-body">
  <form [formGroup]="form" (ngSubmit)="onSubmit()">
    <label>Field1</label>
    <input type="text" class="form-control" formControlName="field1" aria-label="Process id"/>

    <label>TextArea1</label>
    <textarea class="form-control" formControlName="textArea1" aria-label="With textarea"></textarea>

    <label>TextArea2</label>
    <textarea class="form-control" formControlName="textArea2" aria-label="With textarea"></textarea>
  </form>
</div>

Дополнительная информация здесь

...