मुझे [मान] = "विकल्प। नाम टाइप उत्पाद" के हिस्से में स्वत: पूर्ण सामग्री में एक समस्या है, जो मैं पास करना चाहता हूं वह आईडी है, विकल्प के साथ प्रयास करें। आईडी, यह काम करता है लेकिन इनपुट में मुझे आईडी मिलती है, और मैं चाहता हूं, कि जैसा मैं आईडी पास करने के लिए करता हूं, वैसा ही तुम भी मेरा नाम लो, और यह कि नाम बार-बार आता रहे।

इनपुट से गायब नाम के बिना एचटीएमएल के आईडी पैरामीटर को पास करने के बारे में मैं जो कहता हूं उसे करने का कोई तरीका है।

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
Sergio Lopez 20 अप्रैल 2018, 00:14

1 उत्तर

सबसे बढ़िया उत्तर

MatAutocomplete चयनित विकल्प मान को संसाधित करने और प्रदर्शन मान वापस करने के लिए फ़ंक्शन निर्दिष्ट करने के लिए डिस्प्लेविथ सुविधा प्रदान करता है। नाम को विकल्प मान बनाने के बजाय, वस्तु (जैसे उत्पाद) को मान बनाएं। उदाहरण के लिए:

एचटीएमएल:

<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;
}
1
G. Tranter 20 अप्रैल 2018, 18:17