I have created a function in one of my component file that resets the form(myform):
`onSubmit() {
if (this.myform.valid) {
console.log(\"Form Submitted!\")
try this:
this.myform.controls['comments'].reset()
In your html
<select formControlName="idSala" (change)="clearField(1)">
<option value="">Selecione uma sala</option>
</select>
<input type="text" formControlName="titulo">
<input formControlName="dataHoraInicial" type="datetime-local">
TS
clearField(value) {
if (value == 1) {
this.formularioDeAgendamentoSala.controls['titulo'].reset();
this.formularioDeAgendamentoSala.controls['dataHoraInicial'].reset();
}
}
try this one:
clearForm() {
this.myForm.get('comments').reset();
this.myForm.get('name').reset();
}
and call this function where you submit form.
UPDATE:
I just had this issue and although the accepted answer works, it has some tslint warnings. I ended up doing:
this.myForm.get('formControlName').setValue(null);
I'm working with Angular 8.
And if you want to do it for several fields this works too:
private controlNames = ['nameOne', 'nameTwo'];
this.controlNames.map((value: string) => this.myForm.get(value).setValue(null));
Yes you can access the controls using this.myform.controls
get the control and call reset()
on it