web-dev-qa-db-fra.com

L'identifiant 'requis' n'est pas défini. '__type' ne contient pas un tel membre

J'ai besoin de déclarer cette variable pour en taper Cela apparaît dans mon éditeur de code visuel dans mon modèle HTML.

 enter image description here

product-form.component.html

<div class="row">

  <div class="col-md-6">
      <form #form="ngForm" (ngSubmit)="save(form.value)">

            <div class="form-group">
              <label for="title">Title</label>
              <input #title="ngModel" [(ngModel)]="product.title" name="title" id="title" type="text" class="form-control" required>
              <div class="alert alert-danger" *ngIf="title.touched && title.invalid">
                Title is required.
              </div>
            </div>

            <div class="form-group">
                <label for="price">Price</label>
                <div class="input-group">
                  <span class="input-group-addon">$</span>
                  <input #price="ngModel" ngModel [(ngModel)]="product.price" name="price" id="price" type="number" class="form-control" required [min]="0">
                </div>
                <div class="alert alert-danger" *ngIf="price.touched && price.invalid">
                  <div *ngIf="price.errors.required">Price is required.</div>
                  <div *ngIf="price.errors.min">Price should be 0 or higher.</div>
                </div>
            </div>

            <div class="form-group">
                <label for="category">Category</label>
                <select #category="ngModel" ngModel [(ngModel)]="product.category" name="category" id="category" class="form-control" required>
                  <option value=""></option>
                  <option *ngFor="let category of categories$ | async" [value]="category.key">{{ category.payload.val().name }}</option>
                </select>
                <div class="alert alert-danger" *ngIf="category.touched && category.invalid">
                  Category is required.
                </div>
            </div>

            <div class="form-group">
                <label for="imageUrl">Image URL</label>
                <input #imageUrl="ngModel" ngModel [(ngModel)]="product.imageUrl" name="imageUrl" id="imageUrl" type="text" class="form-control" required url>
                <div class="alert alert-danger" *ngIf="imageUrl.touched && imageUrl.invalid">
                  <div *ngIf="imageUrl.errors.required">Image URL is required.</div>
                  <div *ngIf="imageUrl.errors.url">Please enter a valid URL.</div>
                </div>
            </div>

            <button class="btn btn-primary">Save</button>

          </form>
  </div>

  <div class="col-md-6">
      <div class="card" style="width: 20rem;">
          <img class="card-img-top" [src]="product.imageUrl" *ngIf="product.imageUrl">
          <div class="card-block">
            <h4 class="card-title">{{ product.title }}</h4>
            <p class="card-text">{{ product.price | currency: 'USD': symbol }}</p>
          </div>
        </div>
  </div>

</div>

product-form.component.ts

import { Component, OnInit } from '@angular/core';
import { CategoryService } from '../../category.service';
import { ProductService } from '../../product.service';
import { Router } from '@angular/router';
import { ActivatedRoute } from '@angular/router';
import 'rxjs/add/operator/take';

@Component({
  selector: 'app-product-form',
  templateUrl: './product-form.component.html',
  styleUrls: ['./product-form.component.css']
})
export class ProductFormComponent implements OnInit {

  categories$;
  product: any = {};

  constructor(
    private router: Router,
    private route: ActivatedRoute,
    private categoryService: CategoryService,
    private productService: ProductService) {
    this.categories$ = categoryService.getCategories();

    let id = this.route.snapshot.paramMap.get('id');
    if (id) {
      this.productService.get(id).take(1).subscribe(p => this.product = p);
    }
  }

  save(product) {
    this.productService.create(product);
    this.router.navigate(['/admin/products']);
  }

  ngOnInit() {
  }

}

Comment puis-je supprimer cette erreur? La fonctionnalité dans l'application ne semble pas être affectée. Donc, d'après ce que je comprends, cela compile en JS valide. J'ai pu réparer les objets en le déclarant comme "tout"

Je serais intéressé à apprendre à configurer une interface pour cela si possible.

angularangularfire2
10
alex

essayez d'ajouter "?" après "prix".

Comme ça:

<div *ngIf="price?.errors.required">Price is required.</div>
<div *ngIf="price?.errors.min">Price should be 0 or higher.</div>
21
Serhiy Koziuk

Il y a un bug dans angular. Cette erreur du compilateur disparaîtra si vous écrivez cela * ngIf comme ceci:

          <div *ngIf="price.errors['required']">
13
nikola.maksimovic

J'ai eu le même problème avec mon code VS. Je l'ai résolu uniquement en utilisant !! avant la condition.

Essayer:

<div *ngIf="!!price.errors.required">Price is required.</div>
<div *ngIf="!!price.errors.min">Price should be 0 or higher.</div>

Plus d'infos: https://github.com/angular/vscode-ng-language-service/issues/126

1
António César Júnior

<div class="alert alert-danger" *ngIf="email.touched && !email.valid" > <div *ngIf="email.errors['required']">Email is required</div> <div *ngIf="email.errors['minlength']">Email should be minimum {{ email.errors['minlength']['requiredLength'] }} characters</div> <div *ngIf="email.errors['maxlength']">Email should be maximun {{ email.errors['maxlength']['requiredLength'] }} characters</div> <div *ngIf="email.errors['pattern']">Email does'nt match the pattren.</div> </div>

1
vbrgr

Vous pouvez simplement Ajouter un point d'interrogation devant votre propriété  

  <label [attr.data-error]="Password.errors!=null?(Password?.errors.Required?'Required 
  field!':'Minimum 3 Characters Needed'):''">Password</label>
0
Ganesh Nikam