Setting and clearing text fields programmatically using Angular

Question

I am pretty new to angular and I am facing a problem. Namely I am trying to input text type, then clear it up again and then set it again without interacting with the UI.

So here I have a little peace of the text fields:

<div class="form-group">
    <label for="titleText">Title</label>
    <input type="text" class="form-control" [(ngModel)]="titleText" id="titleText" aria-describedby="titleText" placeholder="Title">
</div>
<div class="form-group">
    <label for="authorText">Author</label>
    <input type="text" class="form-control" [(ngModel)]="authorText" id="authorText" placeholder="Author">
</div>

And here is the angular part:

authorText : string;
titleText : string;
durationText : string;
genreText : string;

//Set the values
this.durationText = this.song.duration; //Just a string
this.authorText = this.song.author; 
this.genreText = this.song.genre;
this.titleText = this.song.title;

//Clear the values
jQuery('#editSongDialog').find("input,textarea,select")
    .val('')
    .end()
    .find("input[type=checkbox], input[type=radio]")
    .prop("checked", "")
    .end();

So when I am trying to set the values and clear the values then set the values again (with new values), the all fields end up empty. But when I try to set the values and then override them with new values then it works.

My guess is that the .prop("checked", "") gives the fields a value that does not accept a string and thus it is not filling it.

**do not do this with jQuery**. Update your model and let it update your view. — Taplar, Nov 29 '18 at 22:20
To add to the prior comment, since you are using `[(ngModel)]`, your values will automatically update in your UI based on the values in your code. Simply set `this.titleText = ''` to clear the value. — DeborahK, Nov 29 '18 at 22:22
It interferes with how Angular is already working, messes with change detection, and somewhat defeats the point of what Angular is doing with two way binding. :-) — DeborahK, Nov 29 '18 at 22:29
And one last question if you do not mind.. how would you clear `class="form-control-file"` or the part where I can choose a file. — Richard, Nov 29 '18 at 22:31
@DeborahK since the topic is different, I made a new question for it. [link to new question](https://stackoverflow.com/questions/53549512/clearing-select-field-in-angular?noredirect=1#comment93965845_53549512) — Richard, Nov 30 '18 at 00:44

score 1 · Answer 1 · answered Nov 30 '18 at 00:46

1

As I was told, it is bad practice to use jQuery and the easiest solution here would be using :

this.titleText = ''

answered Nov 30 '18 at 00:46

Richard

171
1
2
13

score 1 · Accepted Answer · answered Nov 30 '18 at 02:53

Ya, don't use Jquery... One option that is clean is to use reactive forms or just FormControls. Reactive forms or model driven forms will make it easy to update/manipulate the form controls by manipulating the model or the control itself..doesn't matter where the change is coming from, server or events...

You can read more about it here, but here is a quick example.

FormControl example

<div class="form-group">
    <label for="titleText">Title</label>
    <input type="text" class="form-control" [formControl]="titleText" id="titleText" aria-describedby="titleText" placeholder="Title">
</div>

relevant parts of the controller:

titleText: FormControl = new FormControl();
titleText.setValue('My great song'); // sets the value of the input
titleText.reset(); // clears the input

FormGroup example

<form [formGroup]="form" (submit)="submitForm()">
<div class="form-group">
    <label for="titleText">Title</label>
    <input type="text" class="form-control" formControlName="titleText" id="titleText" aria-describedby="titleText" placeholder="Title">
</div>
<div class="form-group">
    <label for="authorText">Author</label>
    <input type="text" class="form-control" formControlName="authorText" id="authorText" placeholder="Author">
</div>

and the controller

form: FormGroup;
constructor(private fb: FormBuilder, private http: HttpClient) {
    this.form = this.fb.group({
        'titleText': ['initial value'],
        'authorText': [],
    });
}

 ngOnInit() {
    this.form.get('titleText').setValue('Great Song'); //set value of the control
    this.form.get('titleText').clear(); //clear the control
    this.form.setValue({titleText:'Great Song', authorText:'Gaga'}); //update all values in group
    this.form.patchValue({authorText:'Metallica'}); //update single value in group
    this.form.reset() //clear entire form   
}

Setting and clearing text fields programmatically using Angular

2 Answers2