代码之家 › 专栏 › 技术社区 › Sergio Lopez

带材质自动完成的角度5

angular-material2 angular-material forms angular

Sergio Lopez · 技术社区 · 7 年前

我在自动完成材料中有一个问题,在[值]=“option.NameTypeProduct”部分,我要传递的是id,请尝试使用option。id,它可以工作,但在输入中,我得到id,我希望你给我起个名字,就像我传递id一样,这个名字不断出现。

有一种方法可以实现我所说的传递html的id参数,而不会使名称从输入中消失。

export class DetailproductcreateComponent implements OnInit {

  FormDetailProductCreate : FormGroup;
  myControl = new FormControl();


  filteredProducts : Observable<Product[]>;
  filteredProviders : Observable<Provider[]>;
  filteredTypeProducts : Observable<Typeproduct[]>;
  
  products : Product[];
  providers : Provider[];
  typeproducts : Typeproduct[];

  constructor(private servicedetailproduct : DetailproductService, private FB : FormBuilder,
  private serviceproduct : ProductService, private serviceprovider : ProviderService,
  private servicetypeproduct : TypeprodutService, private servicelote : LoteService) { 
    this.FormDetailProductCreate = this.FB.group({
      Id_Product:[ '',Validators.required],
      Id_TypeProduct:[ '',Validators.required],
      Id_Lote:['', Validators.required],
      Id_Provider:[ '',Validators.required],
      TotalPrice:[ '',Validators.required],
      Quantity:[ '',Validators.required],
      Image:[ '',Validators.required],
    })  

  }

  ngOnInit() {
    this.getProducts();
    this.getProviders();
    this.getTypeProducts();
  }

  getProducts(){
    this.serviceproduct.getProduct().subscribe((data : Product[])=>{
      this.products = data;
      this.filteredProducts = this.FormDetailProductCreate.controls.Id_Product.valueChanges.pipe(
      startWith(''),
      map(val => val ? this.filterProduct(val) : this.products.slice())
      //map(val => this.filterProduct(val))
      );
    });
  }

  getProviders(){
    this.serviceprovider.getProviders().subscribe((data)=>{
      this.providers = data;
      this.filteredProviders = this.FormDetailProductCreate.controls.Id_Provider.valueChanges.pipe(
      startWith(''),
      map(val => val ? this.filterProviders(val) : this.providers.slice())
      );
    });
  }

  getTypeProducts(){
    this.servicetypeproduct.getTypeProduct().subscribe((data)=>{
      this.typeproducts = data;
      this.filteredTypeProducts = this.FormDetailProductCreate.controls.Id_TypeProduct.valueChanges.pipe(
      startWith(''),
      map(val => val ? this.filterTypeProducts(val) : this.typeproducts.slice())
      );
      console.log(this.filteredTypeProducts);
    });
  }

  
  filterProduct(val : string): Product[] {
    return this.products.filter(option => option.NameProduct.toLowerCase().indexOf(val.toLowerCase()) === 0);
  }

  filterProviders(val : string): Provider[] {
    return this.providers.filter(option => option.NombreProveedor.toLowerCase().indexOf(val.toLowerCase()) === 0);
  }

  filterTypeProducts(val : string): Typeproduct[] {
    return this.typeproducts.filter(option => option.NameTypeProduct.toLowerCase().indexOf(val.toLowerCase()) === 0);
  }

<form [formGroup]="FormDetailProductCreate">
      
      <div class="example-container">
        <mat-form-field>
          <input matInput placeholder="Producto" formControlName="Id_Product" class="form-control" id="Id_Product" [matAutocomplete]="product" required>
          <mat-autocomplete #product="matAutocomplete" >
            <mat-option *ngFor="let option of filteredProducts | async" [value]="option.NameProduct">
              {{ option.NameProduct }}
            </mat-option>
          </mat-autocomplete>
        </mat-form-field>
        <div class="color-required" *ngIf="FormDetailProductCreate.get('Id_Product').touched && FormDetailProductCreate.get('Id_Product').invalid">
          Producto es requerido
        </div>
      </div>

      <div class="example-container">
        <mat-form-field>
          <input matInput formControlName="Id_TypeProduct" placeholder="Tipo de producto" class="form-control" id="Id_TypeProduct" [matAutocomplete]="typeproduct" required>
          <mat-autocomplete #typeproduct="matAutocomplete" >
            <mat-option  *ngFor="let option of filteredTypeProducts | async" [value]="option.NameTypeProduct">
              {{ option.NameTypeProduct }}
            </mat-option>
          </mat-autocomplete>
        </mat-form-field>
        <div class="color-required" *ngIf="FormDetailProductCreate.get('Id_TypeProduct').touched && FormDetailProductCreate.get('Id_TypeProduct').invalid">
          Tipo de producto es requerido
        </div>
      </div>

      <div class="example-container">
        <mat-form-field>
          <input type="number"  matInput formControlName="Id_Lote" placeholder="Fecha vencimiento" class="form-control" id="Id_Lote" required>
        </mat-form-field>
        <div class="color-required" *ngIf="FormDetailProductCreate.get('Id_Lote').touched && FormDetailProductCreate.get('Id_Lote').invalid">
          Fecha vencimiento es requerido
        </div>
      </div>

      <div class="example-container">
        <mat-form-field>
          <input matInput formControlName="Id_Provider" placeholder="Proveedor" class="form-control" id="Id_Provider" [matAutocomplete]="provider" required>
          <mat-autocomplete #provider="matAutocomplete">
            <mat-option  *ngFor="let option of filteredProviders | async" [value]="option">
              {{ option.NombreProveedor }}
            </mat-option>
          </mat-autocomplete>
        </mat-form-field>
        <div class="color-required" *ngIf="FormDetailProductCreate.get('Id_Provider').touched && FormDetailProductCreate.get('Id_Provider').invalid">
          Proveedor es requerido
        </div>
      </div>

      <div class="example-container">
        <mat-form-field>
          <input type="number"matInput formControlName="TotalPrice" placeholder="Precio total" class="form-control" id="TotalPrice" required>
        </mat-form-field>
        <div class="color-required" *ngIf="FormDetailProductCreate.get('TotalPrice').touched && FormDetailProductCreate.get('TotalPrice').invalid">
          Precio total es requerido
        </div>
      </div>

      <div class="example-container">
        <mat-form-field>
          <input type="number" matInput formControlName="Quantity" placeholder="Cantidad" class="form-control" id="Quantity" required>
        </mat-form-field>
        <div class="color-required" *ngIf="FormDetailProductCreate.get('Quantity').touched && FormDetailProductCreate.get('Quantity').invalid">
          Cantidad es requerido
        </div>
      </div>

      <div class="example-container">
        <mat-form-field>
          <input matInput formControlName="Image" placeholder="Imagen" class="form-control" id="Image" required>
        </mat-form-field>
      </div>
     
    </form>

1 回复 | 直到 7 年前

G. Tranter 7 年前

MatAutocomplete提供displayWith功能,用于指定处理所选选项值并返回显示值的函数。与其将名称作为选项值,不如将对象(如产品)作为值。例如:

html:

<mat-autocomplete #product="matAutocomplete" [displayWith]="displayProduct">
    <mat-option *ngFor="let product of filteredProducts | async" [value]="product">
        {{ product.NameProduct }}
    </mat-option>
</mat-autocomplete>

脚本:

displayProduct(product: Product) {
    return product.NameProduct;
}