Identifier 'required' is not defined. '__type' does not contain such a member

Question

I need to declare this variable to type any? This shows up in my visual code editor in my HTML template.

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() {   }  } 

How do I remove this error? Functionality in the app doesn't seem to be effected. So from what I understand it compiles into valid JS. I was able to fix the objects by declaring it as "any"

I would be interested in learning how to setup an interface for this if possible.

Answer 1

There is a bug in angular. That compiler error will dissapear if you write that *ngIf like this:

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