值 [value] 未在输入中分配答案

【问题标题】：The value [value] is not assigned in input值 [value] 未在输入中分配
【发布时间】：2021-09-26 15:34:09
【问题描述】：

我在输入中使用 [value] 时遇到了一点问题。

这是我的组件 .html

 <div class="form-group">
    <mat-form-field class="example-full-width" style="padding-left: 15px;">
        <input matInput  [value]='value_2_' [(ngModel)]="form.name_1"   placeholder="name_1"  
         name="name_pro_1" required>
</mat-form-field>
 </div>

一切看起来都不错，但是当我运行程序时，该值显示在相应的输入中，但是，作为输入所需的值，它仍然是红色的，直到我在值中添加一个字母才解决或从输入中删除某些内容。

我设法通过删除解决了错误

name = "name_pro_1"

但由于我使用 NgModel，我无法删除该名称，因为我遇到了其他错误。喜欢：

core.js:4352 ERROR 错误：如果在表单标签中使用 ngModel，则必须设置名称属性或表单控件必须在 ngModelOptions 中定义为“独立”。

  Example 1: <input [(ngModel)]="person.firstName" name="first">
  Example 2: <input [(ngModel)]="person.firstName" [ngModelOptions]="{standalone: true}">

【问题讨论】：

标签： html angular typescript

【解决方案1】：

我认为问题出在[(ngModel)]="form.name_1"。尝试将其替换为

[(ngModel)]="testValue" 并在类中定义一个同名的变量，它将起作用。

【讨论】：

我更改了我的代码，但它不起作用，我在我的 component.ts 中定义了我的变量，例如： public testValue = this.form.name_1 在我的 NgModel 中我替换为 [(ngModel) ]="testValue" 但结果是一样的。我的 formTest 变量的语法有问题吗？
您可以分享您的代码示例，以便我们查看问题所在。

【解决方案2】：

我无法复制该问题，但使用 [(ngModel)] 不会使使用 [value] 变得不必要？您可以在 component.ts 文件中将 form.name_1 设置为您想要的值。

【讨论】：

感谢您的回答，我在 component.ts 中进行了此更改，但结果是相同的。在我的 components.ts 中我声明：testValue = this.form.name_1 在我的 NgModel 中我替换为 [(ngModel)]="testValue"。我的 testValue 变量的语法有问题吗？
@EstuardoValenzuela 您可以尝试将#inputName="ngModel" 值添加到您的输入标签。这是一个链接，其中包含有关使用 ngModel 的更多信息。 NgModel
好吧，我添加 #name_pro_1="ngModel" 并删除 name = "name_pro_1" 它似乎可以工作，但在控制台中我收到错误：core.js: 4352 错误错误：如果使用了 ngModel在表单标签中，必须设置名称属性或表单控件必须在 ngModelOptions 中定义为“独立”。我添加它告诉我的内容，这就是它停止工作的地方，当我添加 name = "name_pro_1" 或当我添加 [ngModelOptions] = "{standalone: true}"

【解决方案3】：

最后我解决了这个问题，这是我的解决方案：首先，我删除了component.html输入中的[(ngModel)]，然后在用户选择SKU时使用(change)调用该函数

  <div class="form-group input-sku" >
                              <mat-form-field class="example-full-width">
                                  <mat-label>SKU</mat-label>
                                  <input type="text" placeholder="Search.." id="sku_select" aria-label="number"
                                        matInput [formControl]="myControl" [matAutocomplete]="auto"
                                        [(ngModel)]="selectedValue" (change)="changedata_1($event)" >
                                  <mat-autocomplete autoActiveFirstOption #auto="matAutocomplete">
                                  <mat-option *ngFor="let data of filter_products | async" [value]="data.sku">{{data.sku}}</mat-option>
                                </mat-autocomplete>
                              </mat-form-field>
                            </div>

输入谁收到了值：

 <div class="form-group inputs-name">
                              <mat-form-field class="example-full-width">
                                <mat-label>Name</mat-label>
                                <input type="text" matInput  id="nombre_1"  required [value]="name_1" name="name_1" placeholder="Name" >
                              </mat-form-field>
                            </div>

在我的 component.ts 中

changedata_1(e) {
this.nombre_1 = e.target.value;
this.DataToSave.nombre_1 = this.nombre_1;}

private _filter(value: string): Products_BD[] {
const filterValue = value.toLowerCase();
const data_ = this.DatasProducts.filter(DataProducts => DataProducts.sku.toLowerCase().includes(filterValue));
for(let element of data_){
  const sku1= elemento.sku;
  const name1 = element.name;
 
  this.name_1 = name1;
  this.DataToSave.sku_1 = sku1;
  this.DataToSave.name_1 = name1;

}

return this.DataProducts.filter(DataProducts => DataProducts.sku.toLowerCase().includes(filterValue));}
    this.filter_products = this.myControl.valueChanges.pipe(
  startWith(''),
  map(value => this._filter(value))
);

我希望这个解决方案有所帮助！ :)

【讨论】：