Question

我有这个“用户名”输入：

<div class="form-group"> 
    <label for="userName">Username</label>
    <input name='userName' ngModel id="userName" type="text" 
           ng-model="userName"   init="userName='Bob'" value="Bob" >
</div>

我想将输入默认设置为“鲍勃”，但这不起作用。如果我删除“ ngModel”，则可以使用，并且需要它，否则它将不会将我的用户名发送到服务器。

这是在表格的开头（当我按下“提交”按钮时发生的操作）：

<form #physicians="ngForm" (ngSubmit)="onFormSubmit(physicians.value)">

这是控制器：

onFormSubmit(data) {
    console.log(data);
    this.adminService.updateUser(data).subscribe((responseData: any) => {
        this.router.navigate(['/']);
   },
   (err: HttpErrorResponse) => {
       this.isSignupError = true;
       this.errorText = err.error['message'];
   });
}

我该如何解决？谢谢！

Answer 1

您应该执行以下操作：

ts代码：

export class AppComponent  {
  userName;
  constructor() {
    this.userName = 'Bob';
  }
}

html：

 <form #form="ngForm" novalidate>
    <label>userName:</label>
    <input type="text" name="userName" [(ngModel)]="userName" required minlength="2" maxlength="10" #userNameDir="ngModel">
    <pre>errors: {{userNameDir.errors | json}}</pre>
  <button type="button" [disabled]="form.invalid" (click)="onFormSubmit(form.value)">submit</button>
  <pre>form.value: {{form.value | json}}</pre>
  <pre>form.errors: {{form.errors | json}}</pre>
  <pre>form.status: {{form.status | json}}</pre>
  <pre>form.dirty:{{form.dirty | json}}</pre>
</form>

DEMO。

Answer 2

你可以使用

[defaultValue]="myDefaultValue"

没有 Angular 在输入更改时更改变量“myDefaultValue”。

Answer 3

尝试使用以下代码： HTML ：

<input name='userName'  id="userName" type="text" [(ngModel)]="userName">

TS ：

userName='Bob' // when you have declared the variable

Answer 4

 <form [formGroup]="physicians" (ngSubmit)="onSubmit(physicians.value)">
<div class="form-group"> 
            <label for="userName">Username</label>
            <input  name='userName'  type="text"  formControlName="userName"  >
     </div>

TS FILE代码

将此内容放入ngOnInit

this.physicians= this._formBuilder.group({
      userName:['bob']
})



onFormSubmit(data) {
console.log(data);
 this.adminService.updateUser(data).subscribe((responseData: any) => {
  this.router.navigate(['/']);
},
(err: HttpErrorResponse) => {
  this.isSignupError = true;
  this.errorText = err.error['message'];
});

Answer 5

您可以添加this.userName ='Bob';在.ts文件中，从html中删除init和value ='Bob'。

角度：文本输入不会设置为默认值

5 个答案: