I am using Materialise CSS in my Angular application. I'm currently setting up a Sign Up page with inputs. I want to use the Datepicker to select the date of birth for the user. When add the Datepicker I can select the date but when I submit the form that input comes back as blank.

I'm using Materialise CSS 0.100.2 and I've tried using Materialize 1.0.0 Beta as well but both don't pass the value of the date input. I noticed that in the docs they say "Specify a DOM element to render the calendar in, by default it will be placed before the input." using the "contain" option but I'm not sure if this is right.

The HTML snippet

                    <form [formGroup]="formGroup">
                        <div class="card-content">
                            <span class="card-title">Your Personal Details</span>
                            <p>Please Enter Your Personal Details As Per Your ID Or Passport. <a href="#">Why?</a></p>
                            <div class="input-field">
                                <i class="material-icons prefix">person</i>
                                <input id="firstName" type="text" placeholder="John" formControlName="firstName">
                                <label for="firstName" data-error="wrong" class="active">First Name</label>
                            </div>
                            <div class="input-field">
                                <i class="material-icons prefix">people</i>
                                <input id="firstName" type="text" placeholder="Doe" formControlName="lastName">
                                <label for="firstName" data-error="wrong" class="active">Last Name</label>
                            </div>
                            <div class="input-field">
                                <i class="material-icons prefix">date_range</i>
                                <input id="dateOfBirth" type="text" placeholder="26 March 2019" formControlName="dateOfBirth">
                                <label for="dateOfBirth" data-error="wrong" class="active">Date Of Birth</label>
                            </div>
                            <div class="input-field">
                                <i class="material-icons prefix">mail</i>
                                <input id="email" type="email" placeholder="[email protected]" formControlName="email">
                                <label for="email" data-error="wrong" class="active">Email Address</label>
                            </div>
                            <div class="input-field">
                                <i class="material-icons prefix">lock</i>
                                <input id="password" type="password" placeholder="*******" formControlName="password">
                                <label for="password" data-error="wrong" class="active">Password</label>
                            </div>
                        </div>
                        <div class="card-action">
                            <a class="waves-effect waves-blue btn-flat blue-text grey lighten-4" [routerLink]="['/account/sign/in']">Sign Up Rather</a>
                            <a class="waves-effect waves-blue btn blue" (click)="signUp(formGroup.value)">Sign Up</a>
                        </div>

The TS

  formGroup: FormGroup;

  constructor(private formBuilder: FormBuilder) { 
    this.formGroup = this.formBuilder.group({
      firstName: ['', Validators.required ],
      lastName: ['', Validators.required ],
      dateOfBirth: ['', Validators.required ],
      email: ['', Validators.required ],
      password: ['',Validators.required],
    });
  }

  ngOnInit() {
    $(document).ready(function(){
      $('#dateOfBirth').datepicker({
        format: 'dd mmmm yyyy',
        autoClose: true
      })
    });
  }

  signUp(user) {
    console.log(user);
  }

I expect the output to be {firstName: "Fiskani", lastName: "Chirwa", dateOfBirth: "26 March 2019", email: "[email protected]", password: "password"}

But I get {firstName: "Fiskani", lastName: "Chirwa", dateOfBirth: "", email: "[email protected]", password: "password"}

0 Answers