Question

我正在尝试通过具有一个可重复使用的表单域组件来简化表单，我只需在其中传递名称和变量即可。然后，该组件会处理标签，我在应用中标准化的其他任何标签（例如不进行拼写检查的操作等）。

所以我正在尝试转换这样的东西：

<div class="form-group row">
   <label for="firstName" class="col-sm-2 col-form-label" style="font-weight: 700;">Organization Name</label>
     <div class="col-sm-4">
        <input type="text" class="form-control" name="name" [(ngModel)]="currentOrg.name" />
      </div>
</div>

对此：

<form-field [(fieldName)]="currentOrg.name" [displayName]="'Organization Name'"></form-field>

我的组件看起来像这样：

<div class="form-group row">
   <label for="firstName" class="col-sm-2 col-form-label" style="font-weight: 700;">{{ fieldName }}</label>
     <div class="col-sm-4">
        <input type="text" class="form-control" name="name" [(ngModel)]="fieldRef" />
      </div>
</div>

我的TS文件如下：

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

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

  constructor() { }

  fieldRefValue : any;
  @Input() fieldName;

  @Output()
  fieldRefValueChange = new EventEmitter<string>();

  @Input() 
  get fieldRef() {
    return this.fieldRefValue;
  }

  set fieldRef(val) {
    this.fieldRefValue = val;
    this.fieldRefValueChange.emit(this.fieldRefValue);
  }

然后，我将新组件放在相同形式上，紧挨与currentOrg.name绑定的原始字段上方，这样我就可以查看它是否有效，对一个组件的更改不会更改另一个组件。

我在头上，有人可以指向正确的方向吗？

（请注意，我输入了一半，复制/粘贴了一半，因此某些内容可能无法排列，如果可能的话，我实际上是在寻找我做错了什么）

谢谢你，丹·蔡斯

角形字段字段

0 个答案: