Угловая ошибка проверки формы 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>
Этот тип шаблона вызовет ту же загадочную ошибку.