javascript - 给定错误的类型脚本必须为 formcontrol name id 提供值

Question

我一直收到以下错误:错误错误:必须为名称为“id”的表单控件提供一个值。即使我已经提供了相同的值(value)，这是我的 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>

谁能告诉我哪里出错了？为什么这个错误不断发生？

Answer 1

因为你只想改变控件id的值，你应该使用patchValue而不是setValue方法来修改值那个 formControl。

this.subcategoryForm.patchValue({
       id:res.result.Name
});

如果你想使用 setValue 方法，你可以从 formControl id 调用它:

this.subcategoryForm.controls['id'].setValue(res.result.Name);