我正在使用Angular 6使用MEAN Stack开发一个Web应用程序。我在html中有一个按钮,当我单击该按钮时可以获取默认值,该按钮应将默认值填充到表单字段中。这是我的html表单。
export = Object.assign ( foo, { default: foo } );
我将数据从mongo db获取到我的.ts文件,并尝试使用Angular中的'setValue'方法将值设置为表单字段。 .ts文件
let obj = {};
function addData(){
let length = Object.keys(obj).length
temp = {name:"test"+(length+1),hobby:"test"+(length+1)}
obj[length]= temp;
console.log(obj);
}
我的问题是以下部分无法正常工作。我做错了还是有什么方法可以满足我的要求?
<div style="float: right" id="extrudedHeightPanel" *ngIf="isExtrudedHeight" name="extrudedHeight">
<form #extrudedHeightForm="ngForm" (ngSubmit)="saveExtrudedHeightValue(extrudedHeightForm)" #form="ngForm">
<nb-card class="action-buttons">
<div class="form-input-group">
<div class="row">
<div class="">
<button type='button' (click)="setDefaultValues()" class="btn btn-sm btn-rectangle btn-default text-case">Restore Default</button>
</div>
<div class="">
<button type="submit" class="btn btn-sm btn-rectangle btn-default text-case">Done</button>
</div>
</div>
</div>
</nb-card>
<br>
<br>
<br>
<p>Extruded Height</p>
<br>
<div class="form group">
Extruded Height:
<input type="text" nbInput name="extrudedHeight" [(ngModel)]="extrudedHeight" />
</div>
</form>
</div>
-更新-
当我换成 class{
extrudedHeightForm: FormGroup;
ngOnInit()
{
this.extrudedHeightForm = new FormGroup({
extrudedHeight: new FormControl()
});
}
//Set default values for extrudedHeight
setDefaultValues() {
this.extrudedHeightService.getExtrudedHeight("default").subscribe(data => {
this.extrudedHeightForm.setValue({
extrudedHeight:data['extrudedHeight']
});
});
}
}
如答案中所建议,它也不起作用。为了检查该值,我打印了console.log。
'console.log(this.extrudedHeightForm.get('extrudedHeight'));'部分给出以下值。
但是值250不会显示在表单字段中。
答案 0 :(得分:0)
尝试
this.extrudedHeightForm.get('extrudedHeight').setValue(data['extrudedHeight']);
您应该在FormControl而不是FormGroup上设置值。
答案 1 :(得分:0)
在初始化formcontrol时,我认为您需要给它一个类型提示,例如:
this.extrudedHeightForm = new FormGroup({
extrudedHeight: new FormControl('')
});
以下代码应为您工作(我删除了一些不必要的部分):
<div style="float: right" id="extrudedHeightPanel" >
<form [formGroup]="extrudedHeightForm" (ngSubmit)="saveExtrudedHeightValue(extrudedHeightForm)">
<div class="">
<button type='button' (click)="setDefaultValues()" class="btn btn-sm btn-rectangle btn-default text-case">Restore Default</button>
</div>
<br>
<br>
<br>
<p>Extruded Height</p>
<br>
<div>
Extruded Height:
<input type="text" formControlName="extrudedHeight" [(ngModel)]="extrudedHeightForm.extrudedHeight"/>
</div>
</form>
</div>
答案 2 :(得分:0)
您正在使用两种完全不同的形式。在您的模板中,您有一个模板驱动的表单,而在TS中,您有一个反应性表单,因此,当您在FormControl
中设置一个值时,它当然不会反映在视图中。您实际上需要在模板中使用反应形式。这是一个简化的版本:
<form [formGroup]="extrudedHeightForm">
<input formControlName="extrudedHeight" />
</form>
表单的外观与您在ts中的外观相同,即:
ngOnInit() {
this.extrudedHeightForm = new FormGroup({
extrudedHeight: new FormControl()
});
}
并设置值:
this.extrudedHeightService.getExtrudedHeight("default").subscribe((data: any) => {
this.extrudedHeightForm.get('extrudedHeight').setValue(data.extrudedHeight);
});
在上面,请勿使用any
作为类型,而应将您的数据键入为接口或类。