javascript - 类型脚本报错:必须为 formcontrol 提供 name 或 id 的值
我一直收到以下错误:ERROR 错误:必须为名称为 'id' 的表单控件提供一个值。即使我已经为其提供了值,这里是我的 TypeScript 代码
import { Component, OnInit,Inject } from '@angular/core';
import {MatDialog,MatDialogRef,MAT_DIALOG_DATA} from '@angular/material';
import {FormGroup,FormBuilder,Validators} from '@angular/forms';
import {AdminService} from '../../services/admin.service';
@Component({
selector: 'app-subcategory-modal',
templateUrl: './subcategory-modal.component.html',
styleUrls: ['./subcategory-modal.component.css']
})
export class SubcategoryModalComponent implements OnInit {
subcategoryForm:FormGroup;
category:any;
constructor(public subCategoryDialogref:MatDialogRef<SubcategoryModalComponent>,@Inject(MAT_DIALOG_DATA)public data:string,private formBuilder:FormBuilder,private service:AdminService)
{
this.generateCategory();
}
ngOnInit() {
this.createForm();
this.generateSubcategory(this.data);
}
createForm()
{
this.subcategoryForm=this.formBuilder.group({
id:[null,Validators.required],
subcategoryName:[null,Validators.required],
category:[null,Validators.required]
});
}
generateSubcategory(data)
{
this.service.getSubcategorys(data).subscribe(res=>{
console.log(res.result);
this.subcategoryForm.setValue({
id:res.result.Name
});
},err=>{
});
}
generateCategory()
{
this.service.getCategory().subscribe(res=>{
this.category=res;
});
}
}
这是我的 HTML 代码:-
<form [formGroup]="subcategoryForm">
<div class="form-group">
<input type="text" class="form-control" formControlName="id"value="" name="id">
</div>
<div class="form-group">
<input type="text" class="form-control" formControlName="subcategoryName" name="subcategoryName" >
</div>
<div class="form-group">
<select class="form-control" name="category" formControlName="category">
<option value="0">-Select-</option>
<option *ngFor="let data of category?.result" value="{{data.id}}">{{data.Name}}</option>
</select>
</div>
<div class="form-group text-center">
<button type="button" class="btn btn-primary" name="button">Update</button>
</div>
</form>
有人能告诉我我哪里做错了吗?以及为什么这个错误一直发生?
答案#1
既然你只想更改控件 id 的值,你应该使用 patchValue 而不是 setValue 方法来修改该 formControl 的值。
this.subcategoryForm.patchValue({
id:res.result.Name
});
如果你想使用 setValue 方法,你可以通过 formControl id 调用它:
this.subcategoryForm.controls['id'].setValue(res.result.Name);
