错误错误：具有未指定名称属性的表单控件没有值访问器

Question

<input type="email" class="form-control passname" [(ngModel)]="emailID" name="Passenger Email ID" placeholder="email" required pattern="^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$"/>
<div class="shake-tooltip-websearch-email" *ngIf="webEmailError != ''">{{webEmailError}}</div>
<div class="col-sm-4 col-xs-4 no-padding cont-code">
  <input class="form-control passenger-contact-number" type="text"  name="contCode" value ="+91" readonly>
</div>
<div class="col-sm-8 col-xs-8 contact">
  <input class="form-control contact-number" type="text" [(ngModel)]="contactNumber" name="contact-number" placeholder="Phone"  placeholder="Mobile Number" pattern="(?<!\d)\d{10}(?!\d)" requried minlength="10" maxlength="10" required />
  <div class="shake-tooltip-web-mobile" *ngIf="webMobileError != ''">{{webMobileError}}</div>
</div>

I am developing a contact details page, where the user needs to enter emailID and contact number, and if the fields are left empty , then the error tooltips will show up. Everything is working fine, the email tooltip is not showing any console error, but for contact number, I am getting the

ERROR Error: No value accessor for form control with unspecified name attribute

error. Tried whatever solutions are provided in stackover flow, still nothing is working. Any suggestion?

Answer 1

It's because you have a spelling mistake on the contact-number input. You have 'required' twice and one of them is spelled 'requried'. Also you have two placeholders on that one. And although it's not relevant to this, no id's, good practice to get into.