Question

好：我不知道咖啡因是否无效，或者我可忽略的是什么，但是我需要在其中添加假人。我有一个表单，并且表单中的一个组件包含输入。

这是表单模板：

<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+应用。

Answer 1

作为属性fieldName传递给@Input的{{1}}应该与属性绑定语法一起使用。使用它，我能够传递audit-tooltip，并且它以fieldName的值进行渲染。

方法如下：

nameSample

如果需要，这里是StackBlitz。

子组件中的角度绑定formcontrolname

1 个答案: