错误“无法绑定到ngModelOptions,因为它不是'input'的已知属性”显示在一个输入上,而不显示在另一个输入上

问题描述 投票:2回答:3

我有两个input,在这里我需要使用[ngModelOptions]="{standalone: true}"以避免警告:

看来您正在与ng相同的表单字段上使用ngModelformControlName。支持将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基本相同,唯一的区别是它们位于不同的组件中。我已经在我的app.component中导入了FormsModule。实际上,第一个输入可与ngModelOptions配合使用。

angular angular7 angular-reactive-forms
3个回答
0
投票

第二个:

<input 
  type="text" 
  matInput 
  [ngModelOptions]="{standalone: true}" 
  [formControl]="puntiVendita" 
  [matAutocomplete]="auto">

此输入上不需要[ngModelOptions]

您不会收到此错误,因为您没有在此输入上使用[ngModel]

[ngModelOptions]输入仅在具有[ngModel]指令的输入上可用。因此,[ngModelOptions]仅在带有'[ngModel]'

的输入上可用

您可以在docs中看到此内容


0
投票

FormsModule具有withConfig静态方法。您可以在其中传递warnOnDeprecatedNgFormSelector标志来摆脱警告消息。

尝试一下

app.module.ts

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

0
投票

我们不要在同一输入中使用together 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 >

OK

   <input ngModel #pickerDal matInput [matDatepicker]="pickerDal"
      <!--using (dateChange) to change the value of myForm.get('dal')-->
      (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的值

© www.soinside.com 2019 - 2024. All rights reserved.