typescript 未定义标识符“必需”。'__type' 不包含这样的成员

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

提问by alex

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

我需要声明这个变量来输入任何类型吗？这显示在我的 HTML 模板中的可视化代码编辑器中。

product-form.component.html

产品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

产品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"

如何消除此错误？应用程序中的功能似乎没有受到影响。所以据我所知，它编译成有效的 JS。我能够通过将其声明为“任何”来修复对象

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

如果可能的话，我有兴趣学习如何为此设置界面。

回答by nikola.maksimovic

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

角度有问题。如果你这样写 *ngIf ，编译器错误就会消失：

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

回答by Serhiy Koziuk

try to add "?" after "price".

尝试添加“？” 在“价格”之后。

Like this:

像这样：

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

回答by António César Júnior

I had same problem with my VS Code. I solved it only using !!before the condition.

我的 VS Code 也有同样的问题。我只!!在条件之前使用解决了它。

Try:

尝试：

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

More info: https://github.com/angular/vscode-ng-language-service/issues/126

更多信息：https: //github.com/angular/vscode-ng-language-service/issues/126

回答by vbrgr

<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>

回答by mpro

Had similar error trying to access FormArraycontrols inside the FormGroupon the view using ngFor.

也有类似的错误尝试访问FormArray控制内部FormGroup使用的视图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']

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

whole element:

整体元素：

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

回答by Ambar Mutha

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

使用hasError()方法而不是errors属性为我修复它。
像这样使用它：

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

回答by NUKE

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

我遇到了同样的问题，感谢 António César Júnior 的回答：

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

https://stackoverflow.com/a/53403416/8992452仅使用

   !!

<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>

回答by Prova Web

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>

回答by Ganesh Nikam

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>