Ошибка «невозможно связать с ngModelOptions, так как это не известное свойство« input »», отображаемое на одном входе, а не на другом - PullRequest
Новая
       13

Ошибка «невозможно связать с ngModelOptions, так как это не известное свойство« input »», отображаемое на одном входе, а не на другом

2 голосов
/ 10 января 2020

У меня есть два input, где мне нужно использовать [ngModelOptions]="{standalone: true}", чтобы избежать предупреждения:

Похоже, вы используете ngModel в том же поле формы, что и formControlName. Поддержка использования свойства ввода ngModel и события ngModelChange с директивами реактивной формы устарела в Angular v6 и будет удалена в Angular v7.

Так что в этом случае все работает правильно: 

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

но для другого он говорит: " 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>

РЕДАКТИРОВАТЬ
Я сделал ошибку и полагал, что предупреждение пришло от неправильного вход. Я исправил вопрос с правильным примером. Теперь input в основном одинаковы, единственное отличие состоит в том, что они находятся в другом компоненте.
Я импортировал FormsModule в моем app.component. На самом деле первый вход работает нормально с ngModelOptions.

Ответы [ 2 ]

0 голосов
/ 10 января 2020

Usr НЕ используется в одном входе вместе formControlName и [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 >

ОК 

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

ДРУГОЙ ОК (*) 

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

(*) Я полагаю, что вы действительно не хотите менять значение dal_default

0 голосов
/ 10 января 2020

FormsModule имеет метод withConfig stati c. Где вы можете передать флаг warnOnDeprecatedNgFormSelector, чтобы получить предупреждающее сообщение.

Попробуйте это

app.module.ts 

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