Error “can't bind to ngModelOptions since it isn't a known property of 'input'” showing on one input and not in another

2
votes

I have two input where I need to use [ngModelOptions]="{standalone: true}" to avoid the warning:

It looks like you're using ngModel on the same form field as formControlName. Support for using the ngModel input property and ngModelChange event with reactive form directives has been deprecated in Angular v6 and will be removed in Angular v7.

So in this one it works correctly:

<form>
[...]
      <div>
              <mat-label>myLabel</mat-label>
          <input class="inputText" matInput type="text" [(ngModel)]="totaleAttivita" [readonly]="true" [ngModelOptions]="{standalone: true}">
      </div>
[...]
  </form>

but for this other one it says " can't bind to ngModelOptions since it isn't a known property of 'input' " :

<form [formGroup]="myForm">
      <mat-form-field class="col" >
    <input ngModel #pickerDal matInput [matDatepicker]="pickerDal"
      (dateChange)="fromDate('change', $event)" formControlName="dal" [(ngModel)]="dal_default"
      (focus)="pickerDal.open()" readonly **//WANT TO PUT STANDALONE:TRUE HERE**>
    <mat-datepicker-toggle matSuffix [for]="pickerDal"></mat-datepicker-toggle>
    <mat-datepicker #pickerDal></mat-datepicker>
  </mat-form-field>
[...]
</form>

EDIT
I did a mistake and believed the warning came from the wrong input. I've fixed the question with the correct example. Now the inputs are basically the same, the only difference is that they are in a different component.
I've imported FormsModule in my app.component. In fact the first input works fine with ngModelOptions.

2
angularangular7angular-reactive-forms
The advertisement say that, if you're using a input with [(NgModel)] inside a <form [formGroup]="form"> your need add [ngModelOptions]="{standalone: true}" in this input tag (this become like <input [(ngModel)]="variable" [ngModelOptions]="{standalone: true}"> . This is util, e.g. if you want has a checkbox that not belong to the formGroup, but change the aparence of the form or the value of one formControl that belong to the form but has not input. Of course is depreciated (and has no sense) use [formControl] or formControlName and [(ngModel)] in the same input tag – Eliseo
Hi @Eliseo, thanks for your comment. I've edited the question because I've found out the problem is from another input. Sorry – Usr
NOT use in the same input together formControlName and [ngModel], see my answer – Eliseo

2 Answers

0
votes

FormsModule has withConfig static method. Where you can pass warnOnDeprecatedNgFormSelector flag to get rid warning message.

Try this

app.module.ts

imports: [
    BrowserModule,
    BrowserAnimationsModule,
    FormsModule.withConfig({ warnOnDeprecatedNgFormSelector: "never" }),
    HttpClientModule,
    DemoMaterialModule,
    MatNativeDateModule,
    ReactiveFormsModule
  ]
0
votes

Usr NOT use in the same input together formControlName and [ngModel]

WRONG

   //WRONG, NEVER formControlName and [(ngModel)]
   <input ngModel #pickerDal matInput [matDatepicker]="pickerDal"
      (dateChange)="fromDate('change', $event)" 
      formControlName="dal" 
      [(ngModel)]="dal_default"
      (focus)="pickerDal.open()" readonly >

OK

   <input ngModel #pickerDal matInput [matDatepicker]="pickerDal"
      <!--using (dateChange) to change the value of myForm.get('dal')-->
      <!-- see that you has no input with formControlName="dal"-->
      <!-- because is not necesary, the form exist even you has no input  -->
      (dateChange)="fromDate('change', $event);
                    myForm.get('dal').setValue($event.value)" 
      [(ngModel)]="dal_default"
      [ngModelOptions]="{standalone: true}
      (focus)="pickerDal.open()" readonly >

ANOTHER OK (*)

   <input ngModel #pickerDal matInput [matDatepicker]="pickerDal"
      (dateChange)="fromDate('change', $event);
      formControlName="dal" 
      (focus)="pickerDal.open()" readonly >

   //in .ts, after create the form
   this.myForm.get('dal').setValue(dal_default)

   //or if you create the form with formBuilder
   this.myForm=this.fb.group(
     ...
     dal:dal_default
   )
    //or if you create the form directy
   this.myForm=new FormGroup({
     ...
     dal:new FormControl(dal_default)
   })

(*)I supouse that you really don't want change the value of dal_default