在 Angular 的输入标签中使用值

Question

我目前正在开发 Angular 前端。

我想使用与我合作的团队创建的组件，该组件用于在表单中创建输入文本。

该组件的 .html（我们称之为输入文本）如下所示：

<div [formGroup]="formGroup">
   ....
      <ng-container>
        <input
          ....
          [id]="controlName"
          type="text"
          [formControlName]="controlName"
          [placeholder]="placeholder"
          [value]="value"
      ....
        />
      </ng-container>
   ....
</div>

在他的 .ts 中：

@Input() value = '';

我的使用方式如下：

 <input-text 
   [formGroup]="formGroup"
   [label]="Name"
   controlName="name">
  </input-text>

我注意到，当页面加载时，

name

formControl 的现有值不会显示在我的页面输入中。经过查找，发现这个组件是通过添加

[value]="formGroup.get('name')?.value"

来指定加载时显示的值。

我问自己以下问题：

• 在 的

  [value]

  标签中使用这个

  <input>

  参数有用吗？ 组件的 html？ Angular 不允许你链接 直接formControl并显示其值？

• 另一个问题，我在整个系统中都使用了这个

  input-text

  组件 地方，没有指定一个值（我没有看过它是如何 以前用过，我认为 formControl 就足够了）我注意到
  在某些情况下它仍然显示 formControl 的值并且 其他人则不然。这是怎么发生的？

  value

  的默认值为 空字符串，但在某些情况下它会显示
  的值 表单控件。当我不传递 a 时，输入不应该始终为空吗 [价值]？我不明白为什么。

提前感谢您的回答。

Answer 1

尝试下一个（当新的输入值出现时，您更新表单输入值。）：

...    
@Input('value') set _value(name: string) {
  this.formGroup.patchValue({name});  
}
...