0

Добрый день, подскажите пожалуйста есть ли возможность передавать FormGroup в кастомный компонент. Например имеется форма:

personForm = new FromGroup({
  name: new FormControl(''),
  family: new FormControl(0),
  address: new FormArray([]),
})

а поле адрес будет тоже группой полей например:

addressItemForm = new FromGroup({
   street: new FormControl(''),
   id: new FormControl(0),
   codeCladr: new FormControl(0),
})

и я хочу иметь свой компонент например AddressComponent который будет работать с addressItemForm... Из рассматриваемых примеров все приводят только "плоскую форму" без всех возможных вложенностей..

4
  • Привет =) Что в итоге Вы хотите получить?
    – Denisoed
    9 сен 2017 в 1:31
  • Привет! я хочу элемент массива реактивной формы вынести в отдельный компонент что бы его затем в других страницах использовать
    – aknysh
    11 сен 2017 в 7:24
  • То есть Вы хотите иметь компонент(к примеру форму поиска по сайту), который можно будет внедрять в нужный компонент?
    – Denisoed
    11 сен 2017 в 9:09
  • Да, а почему бы нет? разработать так сказать базовый набор компонентов и модулей которые в дальнейшем можно набрасывать на страницу с меньшими затратами времени..
    – aknysh
    11 сен 2017 в 9:29

2 ответа 2

1

Спасибо всем за ответы! Особенно @Denisoed за предложенные статьи. Почитал осмыслил и все получилось! Решение которое завелось:

Родительский компонент имеет вид: person.component.ts

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

@Component({
  selector: 'person',
  templateUrl: './person.component.html',
  styleUrls: ['./person.component.scss']
})
export class PersonComponent implements OnInit {

    personForm: FromGroup;


  constructor() { }

  ngOnInit() {
  }


  initF():FormGroup{
    return new FromGroup({
        name: new FromControl(),
        ...
        address: new FormArray([]),
        ...

    })
  }
}

person.component.html имеет вид:

<form [formGroup]>
...
<div *ngFor="let address of personForm.controls['address'].controls;let i=index;" 
     formGroupName={{i}}>
  <address [formControl]="address">
  </address>
</div>
...
</form>

и компонент адреса имеет вид address.component.ts:

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

@Component({
  selector: 'address',
  templateUrl: './address.component.html',
  styleUrls: ['./address.component.scss']
})
export class AddressComponent implements ControlValueAccessor {

  private onChangeCallback: Function;
  private onTouchedCallback: Function;


  addressForm: FromGroup;


  constructor() {
  }

  writeValue(obj: any): void {
    debugger;
    if (obj) {
    } else {
      this.addressForm = this.initForm();
    }
  }

  registerOnChange(fn: any): void {
    this.onChangeCallback = fn;
  }

  registerOnTouched(fn: any): void {
    this.onTouchedCallback = fn;
  }

  setDisabledState?(isDisabled: boolean): void {
    throw new Error('Method not implemented.');
  }


  initForm(): FormGroup {
    return new FromGroup({
      name: new FromControl(),
      address: new FormArray([]),
    })
  }
}

Спасибо всем больше за помощь!

PS: в примере продемонстрирована идея, и если немного подредактировать то код вполне рабочий

2
  • Это победа друг мой =)
    – Denisoed
    12 сен 2017 в 7:42
  • @Denisoed а что тогда?
    – aknysh
    12 сен 2017 в 11:57
0

Давайте возьмем для примера так же форму поиска по сайту
Создаем компонент:

import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms'

@Component({
  selector: 'app-search',
  templateUrl: './search.component.html',
  styleUrls: ['./search.component.css']
})
export class SearchComponent implements OnInit {

  formSearch: FormGroup;   

  constructor(private formBuilder: FormBuilder,) { 
      this.createForm();
  }

  createForm() {
    this.formSearch = this formBuilder.group([
       inputSearch: ['', Validators.required ]
    ]);
  }

  onSearch(searchText) {
     // Отправляете текст сервису, который должен отправить запрос на сервер...
  }

  ngOnInit() {
  }

}

Создаем саму форму в файле search.component.html

<form [formGroup]="formSearch">
   <input type="search" name="search" placeholder="Search..." formControlName="inputSearch" #searchText>
   <button (click)="onSearch(searchText.value)">Search</button>
</form>

После спокойно вставляете тег app-search в нужный вам компонент, а конкретнее в HTML документ =)

12
  • наверное я не правильно выразился.
    – aknysh
    11 сен 2017 в 11:59
  • например у нас есть реактивная форма с полем FormArray
    – aknysh
    11 сен 2017 в 12:00
  • Проблема в том что Ваш вопрос не до конца понятен, поэтому ни кто не может дать ответ =) Перепишите Ваш вопрос более понятно
    – Denisoed
    11 сен 2017 в 12:03
  • в поле FormArray используется FormGroup например так myF = new FromGroup({ ... myFormArray: new FormArray(), ... }); и есть элемент формы например formArrayItem = new FormGroup({ id: new FromControl(), code: new FromControl(), addressString: new FromControl(), house: new FromControl(), ... }) и есть мой (кастомный) компонент адреса например @Component({selector: 'my-addres', templeteURL: '....', }) export class MyAddres implement ControlValueAccessor { .... .... } и я хочу передать элемент FormArray в свой компонент адреса...
    – aknysh
    11 сен 2017 в 12:05
  • наверное я хочу что то страшное... или по китайски выражаюсь(
    – aknysh
    11 сен 2017 в 12:06

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.