2

I'm serving value as fast as I can when user submitted current value. In this case after submitting current value I'm resetting the form and serving new value to user. It working as async call form.reset execution completes after serving new value so at the end my user get null/empty value.

Is there any alternative ways to achieve this or any chances of making it sync

code: .ts

     @ViewChild('f') form

     ngOnInit() {
       this.initialCall();
     }

     initialCall() {
       this.name = 'Angular 5';
     }

     onSubmit(){
       this.form.reset(); //reset form
       this.initialCall(); //serve next value
     }

.html

<form  #f="ngForm"  (ngSubmit)="onSubmit(f.value)">
  <label>Name</label>
  <input type="text" [(ngModel)]="name" name="initail">
  <button type="submit">Done</button>
</form>

What I'm expecting is after click on Done button I need to show 'Angular 5' in text field but it showing empty.

And do any one can explain why change detection not happening here ?

Improve this question
4
  • i don't get what you mean if you console name in onSubmit you get the name. Commented Jun 12, 2018 at 6:36
  • @fatemefazli I just edited my question, let me know still you need any info/clarification. Commented Jun 12, 2018 at 6:37
  • your code works fine, when i click on done input is Angular 5 and name var is full. Commented Jun 12, 2018 at 6:42
  • but binding not happening once check. Commented Jun 12, 2018 at 6:44

4 Answers 4

Reset to default
5

You can use,

onSubmit(){
    this.form.form.markAsPristine();
    this.form.form.markAsUntouched();
    this.form.form.updateValueAndValidity();
}

Here is the code:

import { Component, OnInit, ViewChild } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})

export class AppComponent implements OnInit {
  name: string;
  @ViewChild('f') form
  ngOnInit() {

    this.InitialCall();
  }
  InitialCall() {
    this.name = 'Angular 5';
  }

  onSubmit(){
    this.form.form.markAsPristine();
    this.form.form.markAsUntouched();
    this.form.form.updateValueAndValidity();

    this.InitialCall(); 
  }
}

Here is a DEMO

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

4 Comments

form.reset will set my form to initial state like set all validations states to normal so I'm using form.reset. is there any other way to set form to normal/initial state ?
@k11k2, have you seen the latest code, It achieves your requirement, validations and everything will get reset
yes, but I'm not achieving my goal by using this. do you have any idea why form.reset() not detecting changes ?
form.reset() is taking some time to respond
3

i found using ChangeDetectorRef, and it's work like a charm!

import { Component, OnInit, ViewChild , ChangeDetectorRef} from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  name: string;
  @ViewChild('f') form
  ngOnInit() {
    this.InitialCall();
  }
  constructor(private changeDetectorRef: ChangeDetectorRef){}
  InitialCall() {
    this.name = 'Angular 5';
  }

  onSubmit(){
    this.form.reset();
    this.changeDetectorRef.detectChanges();
    this.InitialCall(); 
  }
}
Improve this answer

4 Comments

why I need to call changeDetector manually ? why it not detecting changes on form.reset() ?
@k11k2 When you clear the form value but then immediately restore the value that was already in the UI before change detection runs, change detection will not see any change and doesn't update the binding.
okay, form.reset() - changeDetector pending, binding - change detectioncompleted(current and previous same), form.reset() - changeDetector completed. so it results empty. then If I bind different value then change detector works normal in this case how changeDetector works ? any well defined blogs on this topic?
@k11k2 yes. check this blog and Angular.io.
0

Update onSubmit method as:

onSubmit(){
    this.form.reset();
    setTimeout(() => {
      this.InitialCall(); 
    }, 1)
}

You will have to use setTimeout

Improve this answer

5 Comments

why 1 (which was 10 before the edit) specifically?
You can make it 0, it's just to change the calling sequence.
@AnshumanJaiswal setTimeOut is not in our option mate. cause our main goal is to serve new value as fast as we can.
@k11k2 the time specified is in millis so I think it won't effect if you set it 0, it just invoke the method defined within it after finishing first statement on main thread.
@k11k2 setTimeout() doesn't halt the execution of the script during the timeout period; it merely schedules the specified expression to be run at the specified time. After the call to setTimeout() the script continues normally, with the timer running in the background.
-1

You should use reactive-form approach for the form, because this is very easy to maintain validation and controls of form. And by using reactive-form approach you can use patchValue or setValue method of reactive form.

Improve this answer

2 Comments

you mean REACTIVE FORMS ?
we stick to template-driven forms

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.