angular не может использовать formControlName в дочернем компоненте - PullRequest
Новая
       24

angular не может использовать formControlName в дочернем компоненте

0 голосов
/ 11 июля 2020

У меня есть дочерний компонент, содержащий тег ввода. Мне нужно установить formControlName в родительском элементе, но я получил ошибку

child. html

 <form [formGroup]="formGroupName">
      <div class="input">
        <input type="text" [formControlName]="formControlName" />
        <span class="label">{{ label }}</span>
      </div>
 </form>

child.ts 

export class FactorComponent implements OnInit {
  @Input("label") label: string;
  @Input("formControlName") formControlName: string;
  @Input("formGroupName") formGroupName: string;

  constructor() {}

  ngOnInit() {}
}

parent. html

<form [formGroup]="form" (ngSubmit)="onCalcute()">
      <div class="child" >
        <div class="estimate-part">
              <ng-container *ngFor="let factor of allFactors">
                <otk-factor
                  [label]="factor?.label"
                  [formControlName]="factor?.id"
                  [formGroupName]="form"
                ></otk-factor>
              </ng-container>
        </div>
      </div>

        <div class="btn-row">
          <button class="calcute" type="submit">estimate</button>
        </div>
</form>

parent.ts 

export class GamificationComponent implements OnInit {
  @Input("rooms") rooms: HostRoomInfoModel;
  @Input("roomSelected") roomSelected;
  @Input("roomId") roomId: number;

  showCalcuteBorder: boolean = false;
  form: FormGroup;

  allFactors = [
    {
      id: "price",
      label: "تومان",
      selected: false
    },
    {
      id: "discount",
      label: "درصد",
      selected: false
    },
    {
      id: "response",
      label: "درخواست",
      selected: false
    },
    {
      id: "viewCount",
      label: "رزرو",
      selected: false
    },
    {
      id: "acceptance",
      label: "نفر",
      selected: false
    }
  ];

  constructor(private estimationService: EstimationService) {
    this.form = new FormGroup({
      price: new FormControl(null),
      discount: new FormControl(null),
      response: new FormControl(null),
      viewCount: new FormControl(null),
      acceptance: new FormControl(null)
    });
  }

  ngOnInit(): void {}

  onCalcute() {
    this.showCalcuteBorder = true;
    console.log(this.form.value);
  }

и эта ошибка также получила значение формы введите описание изображения здесь

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

1 Ответ

0 голосов
/ 11 июля 2020

Так как formControlName и formControlName уже зарезервированы селектором angular, не используйте это имя, измените имя привязки свойства ввода примерно так.

child.component.ts 

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

@Component({
  selector: 'otk-factor',
  templateUrl: './otk-factor.component.html',
  styleUrls: ['./otk-factor.component.css']
})
export class OtkFactorComponent implements OnInit {
  @Input("label") label: string;
  @Input() controlName;
  @Input() groupName;

  constructor() {}

  ngOnInit() {}


}

Рабочий пример

...