网站搜索

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);