Angular联系详情页手机号字段报No value accessor错误求助

先看你提供的模板代码：

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

你遇到的错误提示：

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

作为经常处理Angular表单问题的开发者，结合你的代码，我给你几个针对性的排查和修复建议：

• 修正属性拼写错误：
  你的手机号输入框里存在一个拼写错误的属性 requried（少了字母i），还重复写了正确的required。这种冗余且错误的属性会干扰Angular对表单控件的识别逻辑，先删除错误的requried，只保留一个required属性。

• 确认控件在NgForm容器内：
  Angular模板驱动表单中，所有使用[(ngModel)]绑定的控件必须包裹在<form>标签内部，建议给表单添加模板引用变量以便Angular正确识别表单上下文，比如：

  <form #contactForm="ngForm">
    <!-- 把你的所有输入控件都放在这个form标签里 -->
  </form>
  

  如果手机号控件不在form标签范围内，Angular无法将其注册到表单组中，就会抛出"无值访问器"的错误。

• 检查name属性的唯一性与正确性：
  虽然你给手机号控件设置了name="contact-number"，但要确保这个name值在当前表单内是唯一的，没有和其他控件重名。另外，你可以尝试将name值改为和ngModel绑定的变量名contactNumber一致，避免特殊字符可能带来的识别问题。

• 排查自定义指令干扰：
  如果你给手机号输入框添加过自定义指令（比如自定义验证、格式化指令），需要确认该指令是否正确实现了ControlValueAccessor接口，或者是否意外覆盖了原生input的默认行为。如果没有自定义指令，可以跳过这一步。

按照上述步骤逐一排查，优先处理拼写错误和表单容器的问题，应该能快速解决这个错误。

内容的提问来源于stack exchange，提问作者BlizZard