(ngModel)] 具有默认输入值的输入答案

【问题标题】：(ngModel)] input with default input values(ngModel)] 具有默认输入值的输入
【发布时间】：2021-01-23 21:59:21
【问题描述】：

我有一个输入字段，我想设置默认值。但是使用 ngModel 输入字段只是空的。如何设置用户可以更改的默认值？

<div class="control">
 <input #name="ngModel" [(ngModel)]="message.name" name="name" class="input" type="text" value="{{data.name}}" required>
 <p class="help is-danger" *ngIf="name.touched && name.invalid">This field is required</p>
</div>
 <button (click)="saveEdit()" [disabled]="!(name.valid)">Save</button>

我在 angular/webdev 方面不是很有经验...

谢谢！

解决方案：

添加

  ngAfterViewInit() {
    this.message.name = this.data.name
}

到 ts.component

【问题讨论】：

在ngAfterViewInit()中你可以设置message.name的值，它会被绑定到html input字段中。
@Marco 效果很好。太棒了！
你能接受@Shivansh Sethas 的回答吗？它告诉我的事情和我一样吗？

标签： angular

【解决方案1】：

<input [(ngModel)]="message.name" name="name" class="input" type="text" required>

在您的组件中：

message : any = { name: 'YOUR_DEFAULT_VALUE', }

【讨论】：

该解决方案正在运行。我会保留这个而不是使用 ngAfterViewInit()。谢谢！

【解决方案2】：


 <input  [(ngModel)]="message" name="name" class="input" type="text"required>

在你的 Typescript 文件中添加 message = 'defaultvalue'

【讨论】：

这个不起作用，因为 message 是一个对象。请参阅@Shivansh Seth 解决方案，几乎相同。泰！