Angular表单ngModel绑定值覆盖文本输入框placeholder问题

问题原因 #

出现占位符被覆盖的核心原因有两个：

• ngModel绑定写法错误：当前写的ngModel="note.title"、ngModel="note.body"属于静态属性赋值，Angular会直接把引号内的字面量字符串note.title、note.body作为输入框、文本域的初始值渲染，直接覆盖placeholder。这种写法并没有真正绑定到组件类中的note实例属性。
• 正文对应的textarea标签未添加placeholder属性，本身就不会显示自定义占位内容。

修复步骤 #

1. 修正ngModel绑定语法：模板驱动表单推荐使用[()]（俗称香蕉盒）双向绑定语法，将控件和组件实例属性做关联：

• 标题输入框的ngModel部分改为[(ngModel)]="note.title"
• 正文文本域的ngModel部分改为[(ngModel)]="note.body"

2. 给正文textarea标签补充需要的placeholder属性
3. 检查Note类的构造函数，确认没有给title、body属性设置非空默认值，保证表单初始化时两个属性都是空字符串，输入框无预填值时就会正常显示placeholder。

修正后的表单代码 #

<div class="form-container">
    <form #noteForm="ngForm" (ngSubmit)="onSubmit(noteForm)">
        <div class="field">
            <label class="label">Title</label>
            <div class="control">
                <input type="text" name="title" required class="input" [(ngModel)]="note.title" placeholder="Input Title">
            </div>
        </div>
        <br>
        <div class="field">
            <label class="label">Body</label>
            <div class="control">
                <textarea class="textarea" required name="body" [(ngModel)]="note.body" placeholder="Input note content"></textarea>
            </div>
        </div>

        <div class="field is-grouped is-pulled-right">
            <div class="control">
                <button class="button is-text" type="button">Cancel</button>
            </div>
            <div class="control">
                <button class="button is-primary" type="submit">Save</button>
            </div>
        </div>
    </form>
</div>

补充说明：如果不需要输入值自动同步回note实例，也可以用单向属性绑定写法[ngModel]="note.title"，但这种写法下用户输入不会自动更新note对象，提交时需要直接读取表单实例的值，普通编辑场景优先用双向绑定写法即可。
另外你当前组件里的note初始化逻辑重复：类属性定义时已经赋值过一次空note对象，ngOnInit生命周期里又重新执行new Note()，可以删掉其中一处，避免逻辑冲突。

内容的提问来源于stack exchange，提问作者Melody