Set value in html fields in Angular 4

Question

In my angular 4 project I have to set some value in input field and in a MatSelect without any binding.

This is the HTML

<div class="row search-component">
    <div class="col-md-5 no-padding-right">
        <mat-form-field>
            <mat-select placeholder="searchfor" id="selectedFilter" name="propertyList" #selectedFilter>
                <mat-option *ngFor="let property of propertyList" [value]="property">
                    {{property.label}} </mat-option>
            </mat-select>
        </mat-form-field>
    </div>

    <div class="col-md-7 no-padding-left">
        <mat-form-field>
            <input matInput placeholder="search" id="searchfield" name="searchfield" #selectedValue>
            <mat-icon class="pointer" matSuffix>search</mat-icon>
        </mat-form-field>
    </div>
</div>

When I click in a button I have to set a Mat-option and a value in the input field.

This is the method Who have to set the values:

 setField(chipSelected: Filter) {
    this.filter = chipSelected;
    document.getElementById('searchfield').focus();
    document.getElementById('searchfield').value = 'somevalue'; <-- I can't use this instruction
  }

I can't access to value, Why? And how can I access to it?

updated my answer have a look , that how you can access element .. — Pranay Rana
– Pranay Rana, Commented Dec 14, 2017 at 11:10

Pranay Rana · Accepted Answer · 2017-12-14 11:09:40Z

6

you can access input element as below

<input #someInput placeholder="test input">

import { AfterViewInit,ElementRef } from '@angular/core';

export class AppComponent implements AfterViewInit {
  @ViewChild('someInput') someInput: ElementRef;

  ngAfterViewInit() {
    this.someInput.nativeElement.value = "update input value";
  }
}

its angular, then you just bind you input with the template property and assign value

  <input matInput [(ngModel)] = "searchFor" placeholder="search" 
      id="searchfield" name="searchfield" #selectedValue>

then in ts file jus do like this

setField(chipSelected: Filter) {
///your code
 this.searchFor='somevalue';
}

I am not geting one thing you are making use of angularjs2 and typescript and you are trying to get element value by document.getElementById, is something wrong ??

because Component comes with template and .ts template code file ..and you achieve this functionality easily.

edited Dec 14, 2017 at 11:09

answered Dec 14, 2017 at 10:04

Pranay Rana

177k37 gold badges244 silver badges267 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Alessandro Celeghin Over a year ago

I know ngModel , but I don't have to use it in this case

Pranay Rana Over a year ago

@Alessandro - if you do like this than dont make use of angular js 2, because template concept introduced for seperation of concern means to keep html and js in diffrent file ...and by this way you are exposing your html to js file which is wrong pattern, this is written on angular.io website

Pranay Rana Over a year ago

@Alessandro - please do accept/uvpvote if it worked for you

Jaroslaw K. · Accepted Answer · 2017-12-14 10:08:35Z

0

Ohh, I guess that you are new in Angular world. I suggest you to read something about ngModel and data binding in angular (here a link). Using native JS methods like .getElementId() is a horrible idea. F.e. the better solution is use ngModel for your input in way:

<input matInput placeholder="search" [(ngModel)]="someValue" id="searchfield" name="searchfield">

declare cariable in your component:

someValue: string;

and in your method use:

setField(chipSelected: Filter) {
    this.someValue = 'somevalue';
}

edited Dec 14, 2017 at 10:08

answered Dec 14, 2017 at 10:05

Jaroslaw K.

5,4142 gold badges42 silver badges66 bronze badges

5 Comments

Alessandro Celeghin Over a year ago

I know ngModel , but I don't have to use it in this case

Jaroslaw K. Over a year ago

I edited my post. I added link to official tutorial/documentation to use ngModel too.

Pranay Rana Over a year ago

seems like OP trying something out of box or may be want to reinvent the wheel

Alessandro Celeghin Over a year ago

@PranayRana I know that NgModel is a best practice but I ask to do it without it, if you don't know how to do it without NgModel please don't answer

Pranay Rana Over a year ago

@Alessandro- i sussgest you another way , which is Reactive form approch ..in that you can get access to element

Collectives™ on Stack Overflow

Set value in html fields in Angular 4

2 Answers 2

3 Comments

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related