我有两个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配合使用。
第二个:
<input
type="text"
matInput
[ngModelOptions]="{standalone: true}"
[formControl]="puntiVendita"
[matAutocomplete]="auto">
此输入上不需要[ngModelOptions]
。
您不会收到此错误,因为您没有在此输入上使用[ngModel]
。
[ngModelOptions]
输入仅在具有[ngModel]
指令的输入上可用。因此,[ngModelOptions]
仅在带有'[ngModel]'
您可以在docs中看到此内容
FormsModule具有withConfig静态方法。您可以在其中传递warnOnDeprecatedNgFormSelector标志来摆脱警告消息。
尝试一下
app.module.ts
imports: [
BrowserModule,
BrowserAnimationsModule,
FormsModule.withConfig({ warnOnDeprecatedNgFormSelector: "never" }),
HttpClientModule,
DemoMaterialModule,
MatNativeDateModule,
ReactiveFormsModule
]
我们不要在同一输入中使用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的值