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

user_784536 0
Viewed 23645

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

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

}

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.

angularfire2 angular typescript
10 Answers
user_44336800 
<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 maximum {{ email.errors['maxlength']['requiredLength'] }} characters</div>
     <div *ngIf="email.errors['pattern']">Email doesn't match the pattern.</div>
</div>
user_96746060

Had similar error trying to access FormArray controls inside the FormGroup on the view using ngFor.

Some answers to this question worked partially, causing either compile errors or project build failure. For instance:

libraryForm.get('books') //compile error
libraryForm.controls['books'].controls' //build failure

Only below solution works for me so far:

libraryForm['controls']['books']['controls']

whole element:

<div [formGroupName]="i" *ngFor="let book of libraryForm['controls']['books']['controls'];let i = index">
user_93385720

Using the hasError() method instead of errors property fixes it for me.
Use it like this:

 <div *ngIf="price.hasError('required')">Price is required.</div>
user_114270250

You can just Add Question mark in-front of your property 

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

I had the same issue, y solved thanks to the answer from António César Júnior:

https://stackoverflow.com/a/53403416/8992452 by only using 

   !!

<div *ngIf="submitted && f.username.errors">
    <p *ngIf="f.username.errors.required">Email is required</p>
    <p *ngIf="f.username.errors.email">The mail address is invalid</p>
</div>

working in a previous project, then changed to:

 <div *ngIf="submitted && !!f.username.errors">
   <p *ngIf="!!f.username.errors.required">Email is required</p>
   <p *ngIf="!!f.username.errors.email">The mail address is invalid</p>
 </div>
user_89924520

Please check with this solution (for me works fine)!

<div class="alert alert-danger" *ngIf="username.touched && username.invalid">
  <div *ngIf="username.errors['required']">Username are required!</div>
  <div *ngIf="username.errors['minlength']">Username should be minimum {{ username.errors['minlength'].requiredLength }} characters!</div>
  <div *ngIf="username.errors['cannotContainSpace']">Username cannot contains spaces!</div>
</div>
user_39895250

There does seem to be some issue mentioned in the docs:

Sometimes a binding expression triggers a type error during AOT compilation and it is not possible or difficult to fully specify the type. To silence the error, you can use the $any() cast function to cast the expression to the any type as in the following example

So you could do:

$any(price.errors).required

user_34623190
Related