Question

我正在使用反应式表单作为表单模板。我的订阅方法中有setValue()，因此可以将我的产品的表单控件设置为我订阅的数据。我遇到的问题是我希望我的html中的选择选项选择正确的值。现在它没有选择任何值，只是显示一个空白的选择框。我知道我用setValue()方法设置的值是正确的，并且我将其设置为类别和供应商。我知道html select选项中的值不等于我将其设置为的值，这就是为什么它们不会在html中选择的原因。如何将它们设置为“ ===”，以便它将根据我的setValue()方法自动选择正确的值。我已经声明了表单，并具有调用selectedId()的click方法。

在我的ts文件中，我声明了所有服务。在此功能中，我通过ID获取产品数据，然后将表单控件实例设置为这些值。

export class UpdateProductComponent implements OnInit {
  availability:boolean;
  category:number;
  orderBy: String;
  Ascdesc: String;
  page = 0;
  home: Home[];
  product: Product;
  categories: Category[];
  suppliers: Supplier[];
  selectedCategory: Category;
  id: number;



selectedId(id){

this.id = id;

this.homeService.getProduct(this.id).subscribe(data => {
  this.product = data;
  this.updateProduct.setValue({
    id: this.product.id,
    productName: this.product.productName,
    category:this.product.category,
    fullPrice: this.product.fullPrice,
    salePrice: this.product.salePrice,
    availability: this.product.availability,
    supplier:this.product.supplier,
    discount: this.product.discount
  });

}); 

}
// not important to my problem 
selectedId2(id){
  this.id = id ;

  this.homeService.getProduct(this.id).subscribe(data => {
    this.product = data;
  }); 
}


  selectCategory (category) {
       this.category = category.category;
   }

   available(boolean){

    this.availability = boolean;
    }

    update($event){
      this.homeService.getByParm(this.availability,this.category).subscribe(data => {
        this.home = data;
      }); 

    }

// Where my form is declared and form controls  are assigned
    updateProduct = new FormGroup({
      id: new FormControl(''),
      productName: new FormControl(''),
      category: new FormControl(null),
      fullPrice: new FormControl(''),
      salePrice: new FormControl(''),
      availability: new FormControl(''),
      supplier: new FormControl(null),
      discount: new FormControl(''),

    });

constructor(private homeService: HomeService,private supplierService: SupplierService, private categoryService: CategoryService) { }


SortPrice($event:any){
  let icon = document.getElementById("asc-desc1");
  if(icon.className === "fas fa-angle-down"){
    icon.className ="fas fa-angle-up";
    this.homeService.getByPriceAsc().subscribe(data => {
    this.home = data;
  });
  }else{
    icon.className ="fas fa-angle-down"
    this.homeService.getByPriceDesc().subscribe(data => {
      this.home = data;
    });
  };

}

//submit method form my form 
onSubmit() {
  this.homeService.updateProduct(this.updateProduct.value).subscribe((res)=>{
    console.log("Created a product")
  });

  console.warn(this.updateProduct.value);
}


SortSale($event:any){
  let icon = document.getElementById("asc-desc2");
  if(icon.className === "fas fa-angle-down"){
    icon.className ="fas fa-angle-up";
    this.homeService.getBySaleAsc().subscribe(data => {
    this.home = data;
  });
  }else{
    icon.className ="fas fa-angle-down"
    this.homeService.getBySaleDesc().subscribe(data => {
      this.home = data;
    });
  };

}
SortDiscount($event:any){
  let icon = document.getElementById("asc-desc3");
  if(icon.className === "fas fa-angle-down"){
    icon.className ="fas fa-angle-up";
    this.homeService.getByDiscountAsc().subscribe(data => {
    this.home = data;
  });
  }else{
    icon.className ="fas fa-angle-down"
    this.homeService.getByDiscountDesc().subscribe(data => {
      this.home = data;
    });
  };

}


ngOnInit() {




  this.supplierService.getAll().subscribe(data => {
    this.suppliers = data;
  });

    this.homeService.getAll().subscribe(data => {
    this.home = data;
  });




  this.categoryService.getAll().subscribe(data => {
    this.categories = data;
  });

}

}

这是我的html

<td><input class="form-control"  formControlName="id"  disabled></td>
          <td><input class="form-control" id="productName"  formControlName="productName" ></td>
          <td >
              <select class="form-control" formControlName="category">
                <option [ngValue]="this.product.category.categoryName">{{this.product.category.categoryName}} </option>
                <option *ngFor="let category of categories" [ngValue]= "category">{{category.categoryName}}</option>
              </select>
            </td>
          <td><input class="form-control" id="fullprice" formControlName="fullPrice"></td>
          <td><input class="form-control" id="saleprice"   formControlName="salePrice"></td>
          <td><input type="checkbox" class="form-control" id="availability"  formControlName="availability" ></td>
          <td>
            <select class="form-control" formControlName="supplier" >

              <option *ngFor="let supplier of suppliers" [ngValue]="supplier">{{supplier.supplierName}}</option>
            </select>
          </td>
          <td><input class="form-control" formControlName="discount" id="discount" ></td>

Answer 1

假设您的updateProduct是一个formGroup，并且根据ID动态加载服务数据，并且表单组具有默认值，然后使用this.updateProduct.patchValue({...});。这将使用可用值更新表单组。您也可以使用选定的字段进行部分设置。

如果要设置所有值，则setValue({...})应该可以完成工作。

在HTML中，[value]属性足以设置该值。更新您的第一个选项，将category设置为值而不是名称。确保formGroup中的category类型与类别对象相同。

<select class="form-control" formControlName="category">
     <option [value]="this.product.category"> {{this.product.category.categoryName}} </option>
     <option *ngFor="let category of categories" [value]="category">{{category.categoryName}}</option>
</select>

通过带有角反应形式的setValue（）方法选择默认选择选项

1 个答案: