Угловая ошибка проверки формы 2 "Неисправленное отклонение обещания: нельзя назначить ссылку или переменную!"

App.component.html

<div class="container">
  <h2>Form Validation</h2>
  <form>
<div class="form-group">
  <label for="prettyName">Name</label>
  <input type="text" class="form-control" id="prettyName" required minlength="4" maxlength="20" [(ngModel)]="prettyName" name="prettyName" #name="ngModel">
  <div *ngIf="name.errors && (name.dirty || name.touched)" class="alert alert-danger">
    <div [hidden]="!name.errors.required">
      Name is required
    </div>
    <div [hidden]="!name.errors.minlength">
      Name must be at least 4 characters long
    </div>
    <div [hidden]="!name.errors.maxlength">
      Name cannot be more than 20 characters long
    </div>
  </div>
</div>
    <button type="submit" class="btn btn-default">Submit</button>
  </form>
</div>
// ... (Same things for username, email and password)

Ответы

Ответ 1

Вы должны либо изменить свою переменную компонента, либо переменную вашего шаблона #name. Они сталкиваются:

export class AppComponent {
  prettyname: string; // here
  username: string;
  email: string;
  password: string;
}

Также измените String на string

<form>
  <div class="form-group">
    <label for="prettyName">Name</label>
    <input type="text" class="form-control" id="prettyName" required minlength="4" maxlength="20" [(ngModel)]="prettyName" name="prettyName" #name="ngModel">
    <div *ngIf="name.errors && (name.dirty || name.touched)" class="alert alert-danger">
      <div [hidden]="!name.errors.required">
        Name is required
      </div>
      <div [hidden]="!name.errors.minlength">
        Name must be at least 4 characters long
      </div>
      <div [hidden]="!name.errors.maxlength">
        Name cannot be more than 20 characters long
      </div>
    </div>
  </div>
<button type="submit" class="btn btn-default">Submit</button>

Ответ 2

Эта ошибка возникает, когда вы пытаетесь определить ссылочную переменную шаблона с тем же именем существующей переменной, как, например, в этом случае:

    @Component({
    selector: 'example',
    template: '
       <label for="name">Name</label>
       <input type="text" [(ngModel)]="name" #name="ngModel" >
       '
    })
   export class AppComponent {
     name:string;

 }

Как вы можете видеть, theres ссылочная переменная шаблона #name на входе и theres также переменная называется именем в моем классе, это приведет к следующей ошибке при попытке запустить приложение:

   zone.js:355 Unhandled Promise rejection: Cannot assign to a 
   reference or variable! ; Zone: <root> ; Task: Promise.then ; Value: 
   Error: Cannot assign to a reference or variable!(…) Error: Cannot 
   assign to a reference or variable!

решение заключается в изменении имени одной из ваших переменных.

Ответ 3

Использование угловых форм 6

столкнулась с этой ошибкой "Ошибка ERROR: не показано (в обещании): Ошибка: не может назначить ссылку или переменную!"

Чтобы решить эту проблему, я изменил этот HTML-код.

<input type="text" class="form-control" name="username" [(ngModel)]="username" placeholder="Username" required #username="ngModel"/>
<div [hidden]="username.valid || username.pristine" class="alert alert-danger">
  Name is required
</div>

К этому

<input type="text" class="form-control" name="username" [(ngModel)]="username" placeholder="Username" required #usernameMsg="ngModel"/>
<div [hidden]="usernameMsg.valid || usernameMsg.pristine" class="alert alert-danger">
  Name is required
</div>

имя ссылки и название модели были одинаковыми

Ответ 4

Эта ошибка может всплыть с разными причинами. Тот, который я нашел, включает использование ngFor. В частности, при привязке ngModel к переменной итерации:

<div *ngFor="let item of items">
  <input [(ngModel)]="item" />
</div>

Этот тип шаблона вызовет ту же загадочную ошибку.