ANGULAR5 Error: Ngmodel cannot is used to register form controls with a parent formgroup directive

An error occurred while creating a form:

The reason is that the Formgroup directive is used in the outermost form, but in one of the input plugins below, the Ngmodel directive is used, but the FormControl directive or the Formcontrolname attribute is not added.

 
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) cannot be empty</mat-error>
  5 <mat-error *ngIf="snmpIpCtrl.hasError(‘pattern‘)">Please enter a valid IP address</mat-error>
  6 </mat-form-field>
  7
  8 <div>
  9 <p>Whether Netconf is supported</p>
10 <mat-radio-group [(ngModel)]="netconfFlag">
11 <mat-radio-button value="0" color="primary">support</mat-radio-button>
12 <mat-radio-button value="1" color="primary">not supported</mat-radio-button>
13 </mat-radio-group>
14 </div>
15 </form>

Workaround:

1. Add the FormControl directive or the Formcontrolname attribute to the INPUT element

 
1 <div>
2 <p>Whether Netconf is supported</p>
3 <mat-radio-group [(ngModel)]="netconfFlag" [formControl]="netconfFlagCtrl">
4 <mat-radio-button value="0" color="primary">support</mat-radio-button>
5 <mat-radio-button value="1" color="primary">not supported</mat-radio-button>
6 </mat-radio-group>
7 </div>

and define the FormControl for validation in the corresponding component.ts.

2. AddngModelOptions instruction

 
1 <div>
2 <p>Whether Netconf is supported</p>
3 <mat-radio-group [(ngModel)]="netconfFlag" [ngModelOptions]="{standalone: true}">
4 <mat-radio-button value="0" color="primary">support</mat-radio-button>
5 <mat-radio-button value="1" color="primary">not supported</mat-radio-button>
6 </mat-radio-group>
7 </div>

ANGULAR5 Error: Ngmodel cannot is used to register form controls with a parent formgroup directive