title: Identifier 'required' is not defined. '__type' does not contain such a member
body: <p>I need to declare this variable to type any? This shows up in my visual code editor in my HTML template.</p>
  
  <p><a href="https://i.stack.imgur.com/Jq5az.png" rel="noreferrer"><img src="https://i.stack.imgur.com/Jq5az.png" alt="enter image description here"></a></p>
  
  <p>product-form.component.html</p>
  
  <pre><code>&lt;div class="row"&gt;
  
    &lt;div class="col-md-6"&gt;
        &lt;form #form="ngForm" (ngSubmit)="save(form.value)"&gt;
  
              &lt;div class="form-group"&gt;
                &lt;label for="title"&gt;Title&lt;/label&gt;
                &lt;input #title="ngModel" [(ngModel)]="product.title" name="title" id="title" type="text" class="form-control" required&gt;
                &lt;div class="alert alert-danger" *ngIf="title.touched &amp;&amp; title.invalid"&gt;
                  Title is required.
                &lt;/div&gt;
              &lt;/div&gt;
  
              &lt;div class="form-group"&gt;
                  &lt;label for="price"&gt;Price&lt;/label&gt;
                  &lt;div class="input-group"&gt;
                    &lt;span class="input-group-addon"&gt;$&lt;/span&gt;
                    &lt;input #price="ngModel" ngModel [(ngModel)]="product.price" name="price" id="price" type="number" class="form-control" required [min]="0"&gt;
                  &lt;/div&gt;
                  &lt;div class="alert alert-danger" *ngIf="price.touched &amp;&amp; price.invalid"&gt;
                    &lt;div *ngIf="price.errors.required"&gt;Price is required.&lt;/div&gt;
                    &lt;div *ngIf="price.errors.min"&gt;Price should be 0 or higher.&lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
  
              &lt;div class="form-group"&gt;
                  &lt;label for="category"&gt;Category&lt;/label&gt;
                  &lt;select #category="ngModel" ngModel [(ngModel)]="product.category" name="category" id="category" class="form-control" required&gt;
                    &lt;option value=""&gt;&lt;/option&gt;
                    &lt;option *ngFor="let category of categories$ | async" [value]="category.key"&gt;{{ category.payload.val().name }}&lt;/option&gt;
                  &lt;/select&gt;
                  &lt;div class="alert alert-danger" *ngIf="category.touched &amp;&amp; category.invalid"&gt;
                    Category is required.
                  &lt;/div&gt;
              &lt;/div&gt;
  
              &lt;div class="form-group"&gt;
                  &lt;label for="imageUrl"&gt;Image URL&lt;/label&gt;
                  &lt;input #imageUrl="ngModel" ngModel [(ngModel)]="product.imageUrl" name="imageUrl" id="imageUrl" type="text" class="form-control" required url&gt;
                  &lt;div class="alert alert-danger" *ngIf="imageUrl.touched &amp;&amp; imageUrl.invalid"&gt;
                    &lt;div *ngIf="imageUrl.errors.required"&gt;Image URL is required.&lt;/div&gt;
                    &lt;div *ngIf="imageUrl.errors.url"&gt;Please enter a valid URL.&lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
  
              &lt;button class="btn btn-primary"&gt;Save&lt;/button&gt;
  
            &lt;/form&gt;
    &lt;/div&gt;
  
    &lt;div class="col-md-6"&gt;
        &lt;div class="card" style="width: 20rem;"&gt;
            &lt;img class="card-img-top" [src]="product.imageUrl" *ngIf="product.imageUrl"&gt;
            &lt;div class="card-block"&gt;
              &lt;h4 class="card-title"&gt;{{ product.title }}&lt;/h4&gt;
              &lt;p class="card-text"&gt;{{ product.price | currency: 'USD': symbol }}&lt;/p&gt;
            &lt;/div&gt;
          &lt;/div&gt;
    &lt;/div&gt;
  
  &lt;/div&gt;
  </code></pre>
  
  <p>product-form.component.ts</p>
  
  <pre><code>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 =&gt; this.product = p);
      }
    }
  
    save(product) {
      this.productService.create(product);
      this.router.navigate(['/admin/products']);
    }
  
    ngOnInit() {
    }
  
  }
  </code></pre>
  
  <p>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"</p>
  
  <p>I would be interested in learning how to setup an interface for this if possible.</p>