Angular 2 Template driven form with custom input

Question

I have a template driven form with a read only input. When the user clicks on the input, a date picker appears. After the user selects the date, the input field gets populated with the information. However, when I click submit, the data is not there from that input. The other fields work though. So in this case, I get an output of

Console Output:

Object {refNumber: "215170", date: ""}

HTML code:

<form [formGroup]="myForm" novalidate (ngSubmit)="onSubmit(myForm)">

    <div class="form-group">
        <label>Reference Number</label>
        <input type="text" class="form-control" formControlName="refNumber">
    </div>

    <!--Date Picker-->
    <input (focus)="toggleDatePicker(true)" readonly value={{date}} class="form-control" formControlName="date" />

    <date-picker *ngIf="showDatePicker" [initDate]="date" (onDatePickerCancel)="toggleDatePicker($event)" (onSelectDate)="setDate($event)"
        ngDefaultControl></date-picker>

</form>

Component Code

 export class AppComponent implements OnInit {

public myForm: FormGroup;

constructor(private _fb: FormBuilder) { }

ngOnInit() {
    this.myForm = this._fb.group({
    refNumber: ['', [Validators.required, Validators.minLength(5)]],
    date: [''],
    });
}

onSubmit(formOutput: FormGroup) {
    console.log(formOutput.value);
    alert('Submit this data to database')
}

// Date TimePicker
private date: any;
private showDatePicker: boolean;

// Date Pciker
toggleDatePicker(status: boolean): void {
    this.showDatePicker = status;
}

setDate(date: any): void {
    this.date = date;
}
}

----------Update-------------------------- I have created a new project just to replicate this issue. The problem is still there. Here is a video of what is happening in this project. To me, it looks like the input value only gets updated when I type something in. Any hard-coded value or in this case, the date that gets passed in, does not update the actual input value behind the scene?

https://www.youtube.com/watch?v=4xc3m6qbILc

https://github.com/eddy80310/formsissue

Santanu Biswas · Accepted Answer · 2017-01-23 14:12:01Z

1

It seems that the datepicker is returning a Object which is neither Date nor String nor does it have a toString() defined. Based on the console output, the following change to your setDate function should solve the problem.

setDate(event: any): void {
    // console.log(event);
    this.date = event.date;
}

If this does not solve the problem then uncomment the console.log in the function to check the format of event object and set the this.date value accordingly.

FINAL EDIT

Okay.. took me a while on Plunker to figure out the actual problem. You are setting the value on the DOM Element directly. Now the problem with that is, it is not triggering any event for ngModel to know about the change.

Following two solutions for this (tested both & both work):

Use setValue to change the value of the input textbox. Example this.myForm.controls['date'].setValue(dateValue).
Use ngModel in your input element. Replace value={{dateValue}} with [(ngModel)]='dateValue'. Since your input element is readonly, you could also do unidirectional data binding using [ngModel]='dateValue'.

I have tested both the solutions on Plunker. Here is the link to the Plunk with setValue() (first option).

edited Jan 23, 2017 at 14:12

answered Jan 23, 2017 at 11:13

Santanu Biswas

4,7872 gold badges24 silver badges21 bronze badges

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

11 Comments

user172902 Over a year ago

the formate of it does not seem to be the issue. As I have tried to remove all code from setDate() and set private date = "1234". When I do that, I see that the input field does get populated with 1234, however, upon submit, I still see the same output with date being "". I am guessing setting value={{date}} does not work with the form? I have even tried to hard code value="1234" in the html and the result is the same. However, if I get rid of readony and type things in, the form seems to get that data fine in that case

Santanu Biswas Over a year ago

There is one more issue. You have the input name as date and also the variable in your component is named date! So instead if picking up the date value, that is causing the mess up.

user172902 Over a year ago

Thanks for pointing that out. I have changed it. Also, please see my previous comment for additional information. Much appreciated of your help

Santanu Biswas Over a year ago

Found the problem and the solution. See my edit above.

Santanu Biswas Over a year ago

I knew that the change is not getting detected. Using Plunker I verified that I was right. Thereafter, the first solution that came to my mind was ngModel, but somehow I don't like to mix it with ReactiveForms, so the second option was to try setValue(). You can also play around with emitEvent if you still want to set the DOM value directly!

|

Collectives™ on Stack Overflow

Angular 2 Template driven form with custom input

1 Answer 1

11 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

11 Comments

Your Answer

Sign up or log in

Post as a guest

Related