HTML "placeholder" 属性成功填写表单输入，但 "value" 属性没有（使用 Angular 2+）

Question

我有一个 Angular UI，单击编辑按钮可将成员名称标题转换为可以编辑和更新名称的表单。我希望表单 pre-filled 具有现有名称。

但是，下面代码段中的 value="{{member.name}}" 行会出现问题。表格只是显示为空白。为什么？

使用 placeholder="{{member.name}}" 正确设置值，但占位符不是我想要的行为。

<h4 *ngIf="!editMode">{{member.name}}</h4>
<form *ngIf="editMode" #f="ngForm" (ngSubmit)="onEdit(f)">
    <input type="text" value="{{member.name}}" ngModel name="name">
    <button type="submit">Update</button>
</form>

Answer 1

要设置输入字段的值，请使用 [ngModel] 指令并将变量作为参数。通常一个人想要一个"two way binding"，所以[]和()是混合的。

<form *ngIf="editMode" #f="ngForm" (ngSubmit)="onEdit(f)">
    <input type="text" [(ngModel)]="member.name" name="name">
    <button type="submit">Update</button>
</form>

可以仅使用 [] 来仅 "set" 输入的值。有关详细信息，请参阅以下 SO 问题：

来源：https://angular.io/api/forms/NgModel

Answer 2

我想出了这个答案来寻找用变量设置占位符，但没有使用上面的解决方案。

我用属性绑定解决了，使用 [placeholder]="myVar" 和 this helpfull link

<form *ngIf="editMode" #f="ngForm" (ngSubmit)="onEdit(f)">
  <input type="text" [(ngModel)]="member.name" name="name" [placeholder]="myVar">
  <button type="submit">Update</button>
</form>

和 Angular 组件设置占位符文本：

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

@Component({
  selector: 'app-input-placeholder',
  templateUrl: './input-placeholder.component.html',
  styleUrls: ['./input-placeholder.component.scss']
})

export class PlaceholderComponent {
  myVar = 'Please enter your name here';
}

HTML "placeholder" 属性成功填写表单输入，但 "value" 属性没有（使用 Angular 2+）

HTML "placeholder" attribute successfully fills form input, but "value" attribute doesn't (using Angular 2+)

html

placeholder

angular2-forms