The value [value] is not assigned in input

user_14445323 0
Viewed 83

I have a little problem using [value] in my inputs.

This is my component .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>

Everything looks good, but when I run the program, the value is shown in the corresponding input, however, being a value required by the input, it is still in red, it is solved until I add a letter to the value or remove something from the input. Image code running

I managed to solve the error by deleting

name = "name_pro_1"

Image code running without name="name_pro_1"

but since I use NgModel I cannot remove the name because I get other errors. Like:

core.js:4352 ERROR Error: If ngModel is used within a form tag, either the name attribute must be set or the form control must be defined as 'standalone' in ngModelOptions.

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

I think the problem is [(ngModel)]="form.name_1". Try to replace that with

[(ngModel)]="testValue" and define a variable in the class with the same name and it will work.

user_116142420

I can't replicate the problem, but using [(ngModel)] doesn't make using [value] unnecessary? You can set the form.name_1 to the value you want on the component.ts file.

user_163953780

Finally i resolved the issue, that it's my solution: First thing first, i delete the [(ngModel)] in the input of component.html, then i used (change) to call the function when user select a SKU

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

Input who recived the value:

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

And in my 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))
);

I hope this solution helps! :)

user_144453230
Related