Угловая привязка formcontrolname в подкомпоненте - PullRequest
Новая
       13

Угловая привязка formcontrolname в подкомпоненте

0 голосов
/ 28 августа 2018

хорошо: я не знаю, кофеин не работает, или то, что я пропускаю, но на этом мне нужны пустышки. У меня есть форма и компонент внутри формы, содержащий входные данные.

Вот шаблон формы: 

<div [formGroup]="parent">
  <h5 class="card-title">{{fieldLabel}}<audit-tooltip fieldName="fieldName" [plan]="plan"></audit-tooltip> </h5>
  <input [formControlName]="fieldName" class="form-control mx-sm-3 col-10" />
</div>

А вот базовый машинописный текст. 

@Component({
  selector: 'info-control',
  templateUrl: './info-control.component.html',
  styleUrls: ['./info-control.component.css']
})
export class InfoControlComponent {
  @Input() fieldLabel: string;
  @Input() parent: FormGroup;
  @Input() plan: Plan;


  private _fieldName: string;
  @Input() public set fieldName(name: string) {
    this._fieldName = name;
  }
  public get fieldName(): string {
    return this._fieldName;
  }
}

А вот и реализация: 

<form [formGroup]="disciplineForm" novalidate>
  <div class="card-body">
    <div class="row">
        <div class="col">
            <info-control [fieldLabel]="'Label Sample'" [parent]="disciplineForm" [fieldName]="'nameSample'" [plan]="plan"></info-control>
            <div class="invalid-tooltip">
              Length cannot exceed 50 characters.
            </div>
      </div>
      </div>
    </div>
</form>

Я не могу получить [formControlName] или fieldName для отображения как "nameSample". Если я включаю скобки, я ничего не получаю в атрибуте DOM, который просто игнорируется. Если я удаляю их, я получаю буквальную строку 'fieldName'.

Что я не понимаю? Это мое первое угловое приложение 2+.

1 Ответ

0 голосов
/ 28 августа 2018

fieldName, который вы передаете как @Input свойство audit-tooltip, должно использоваться с синтаксисом привязки свойства. Используя это, я смог передать fieldName, и он рендерился со значением nameSample.

Вот как: 

<div [formGroup]="parent">
  <h5 class="card-title">
    {{fieldLabel}}<audit-tooltip [fieldName]="fieldName" [plan]="plan"></audit-tooltip>
  </h5>
  <input 
    [formControlName]="fieldName" 
    class="form-control mx-sm-3 col-10" />
</div>

Вот вам StackBlitz , если хотите.

...