如何使用使用ngModel未更改的表单组件的值?
How to use the value of the forms components which are unchanged using ngModel?
我正在制作一个表单并希望在表单中使用以前的值作为 "value" 并通过使用 ngModel 动态更改一些属性但用户未更改的字段 属性甚至不保留以前的值。
<form #edit="ngForm" (submit)="editProfile(edit.value)">
<fieldset>
<div class="form-group">
<label for="username">Username : </label> @{{user.username}}
</div>
<div class="form-group">
<label for="name">Name :</label> @{{user.name}}
<input type="text" name="edit_name" class="form-control" id="name" value={{user.name}} ngModel>
</div>
<div class="form-group">
<label for="email">Email :</label> {{user.email}}
<input type="text" name="edit_email" class="form-control" id="email" value={{user.email}} ngModel>
</div>
<div class="form-group">
<label for="bio">Bio :</label> {{edit_bio}}
<input type="text" name="edit_bio" class="form-control" id="bio" value="Put who you are here!" ngModel>
</div>
<div class="form-group">
<label for="gender">Gender</label>
<select class="form-control" id="gender" name="edit_gender" ngModel>
<option>Male</option>
<option>Female</option>
<option>Others</option>
</select>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</fieldset>
</form>
在 TypeScript 文件中
edit_name:String='';
edit_email:String='';
edit_bio:String='';
edit_gender:String='';
user:any={};
ngOnit(){
this.authService.getuser()
.subscribe(data=>{
this.user=data;
}
this.initiateUpdateProfile();
}
initiateUpdateProfile(){
this.edit_name=this.user.name;
this.edit_email=this.user.email;
this.edit_bio='Something you want to tell the world';
this.edit_gender='Male';
}
editProfile(e){
console.log(e);
}
一切都运行顺利但是当我提交表单时甚至没有触及表单元素而不是edit.value 甚至不保留以前的值,它记录的所有内容都是空值。
<div class="form-group">
<label for="name">Name :</label> @{{user.name}}
<input type="text" name="edit_name" class="form-control" id="name" [(ngModel)]="edit_name" value={{user.name}}>
</div>
我正在制作一个表单并希望在表单中使用以前的值作为 "value" 并通过使用 ngModel 动态更改一些属性但用户未更改的字段 属性甚至不保留以前的值。
<form #edit="ngForm" (submit)="editProfile(edit.value)">
<fieldset>
<div class="form-group">
<label for="username">Username : </label> @{{user.username}}
</div>
<div class="form-group">
<label for="name">Name :</label> @{{user.name}}
<input type="text" name="edit_name" class="form-control" id="name" value={{user.name}} ngModel>
</div>
<div class="form-group">
<label for="email">Email :</label> {{user.email}}
<input type="text" name="edit_email" class="form-control" id="email" value={{user.email}} ngModel>
</div>
<div class="form-group">
<label for="bio">Bio :</label> {{edit_bio}}
<input type="text" name="edit_bio" class="form-control" id="bio" value="Put who you are here!" ngModel>
</div>
<div class="form-group">
<label for="gender">Gender</label>
<select class="form-control" id="gender" name="edit_gender" ngModel>
<option>Male</option>
<option>Female</option>
<option>Others</option>
</select>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</fieldset>
</form>
在 TypeScript 文件中
edit_name:String='';
edit_email:String='';
edit_bio:String='';
edit_gender:String='';
user:any={};
ngOnit(){
this.authService.getuser()
.subscribe(data=>{
this.user=data;
}
this.initiateUpdateProfile();
}
initiateUpdateProfile(){
this.edit_name=this.user.name;
this.edit_email=this.user.email;
this.edit_bio='Something you want to tell the world';
this.edit_gender='Male';
}
editProfile(e){
console.log(e);
}
一切都运行顺利但是当我提交表单时甚至没有触及表单元素而不是edit.value 甚至不保留以前的值,它记录的所有内容都是空值。
<div class="form-group">
<label for="name">Name :</label> @{{user.name}}
<input type="text" name="edit_name" class="form-control" id="name" [(ngModel)]="edit_name" value={{user.name}}>
</div>