Angular5 錯誤: ngModel cannot be used to register form controls with a parent formGroup directive

標籤：出現   hold   分享   rect   reg   元素   ipc   ctrl   directive   

在建立一個表單時，出現了這樣的錯誤：

 

原因是，在最外層的form中使用了 formGroup 指令，但在下面的某個input 外掛程式中，使用了ngModel 指令，但沒有加入formControl 指令或 formControlName 屬性。

 1   <form [formGroup]="form"> 2     <mat-form-field> 3       <input matInput placeholder="IP(SNMP)" [formControl]="snmpIpCtrl" required> 4       <mat-error *ngIf="snmpIpCtrl.hasError(‘required‘)">IP(SNMP)不可為空</mat-error> 5       <mat-error *ngIf="snmpIpCtrl.hasError(‘pattern‘)">請輸入有效IP地址</mat-error> 6     </mat-form-field> 7      8     <div> 9       <p>是否支援Netconf</p>10       <mat-radio-group [(ngModel)]="netconfFlag">11         <mat-radio-button value="0" color="primary">支援</mat-radio-button>12         <mat-radio-button value="1" color="primary">不支援</mat-radio-button>13       </mat-radio-group>14     </div>15 </form>

　　

解決方案：

1. 在input元素中添加 formControl 指令或 formControlName 屬性

1 <div>2       <p>是否支援Netconf</p>3       <mat-radio-group [(ngModel)]="netconfFlag" [formControl]="netconfFlagCtrl">4         <mat-radio-button value="0" color="primary">支援</mat-radio-button>5         <mat-radio-button value="1" color="primary">不支援</mat-radio-button>6       </mat-radio-group>7 </div>

並在相應的component.ts 中定義用於驗證的FormControl。

 

2. 添加 ngModelOptions 指令

1     <div>2       <p>是否支援Netconf</p>3       <mat-radio-group [(ngModel)]="netconfFlag" [ngModelOptions]="{standalone: true}">4         <mat-radio-button value="0" color="primary">支援</mat-radio-button>5         <mat-radio-button value="1" color="primary">不支援</mat-radio-button>6       </mat-radio-group>7     </div>

 

Angular5 錯誤: ngModel cannot be used to register form controls with a parent formGroup directive