从角落的html表单中获取图像名称和日期年份

时间:2017-05-20 15:23:18

标签: javascript html angular

register.component.ts文件位于

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

@Component({
  selector: 'app-register',
  templateUrl: './register.component.html',
  styleUrls: ['./register.component.css']
})
export class RegisterComponent implements OnInit {
firstName: String;
lastName: String;
email: String;
password: String;
image: File;
//location
city: String;
country: String;
dateOfBirth: Date;
// day:String;
// month:String;
// year:String;
numberOfEventsAttended:String;
eventId: String;

  constructor() { }

  ngOnInit() {
  }
onRegisterSubmit(){
    const user = {
      firstName: this.firstName,
      lastName:this.lastName,
      email: this.email,
      password: this.password,
      image: "", // how to get image name
      location:{
          city: this.city,
          country: this.country
       },
       dateOfBirth:{
         day: "", // how to get day
         month: "",// how to get month
         year: ""// how to get year
       },
       eventId: "",
       numberOfEventsAttended: this.numberOfEventsAttended
    }
    console.log(this.image);
 }
}

register.component.html

<div class="container">
  <h3>Registracija</h3>
  <form (submit)="onRegisterSubmit()">
    <div class="input-group">
      <span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
      <input type="text" class="form-control" [(ngModel)]="firstName" name="firstName" placeholder="Ime">
    </div>
    <div class="input-group">
      <span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
      <input type="text" class="form-control" [(ngModel)]="lastName" name="lastName" placeholder="Priimek">
    </div>
    <div class="input-group">
     <span class="input-group-addon"><i class="glyphicon glyphicon-envelope"></i></span>
     <input type="email" class="form-control" [(ngModel)]="email" name="email" placeholder="E-mail">
   </div>
    <div class="input-group">
      <span class="input-group-addon"><i class="glyphicon glyphicon-lock"></i></span>
      <input type="password" class="form-control" [(ngModel)]="password" name="password" placeholder="Geslo">
    </div>
    <div class="input-group">
    <label>Dodaj sliko:</label>
    <input type="file" name="image" [(ngModel)]="image"><br>
    </div>
    <div class="input-group">
      <span class="input-group-addon"><i class="glyphicon glyphicon-home"></i></span>
      <input type="text" class="form-control" [(ngModel)]="city" name="city" placeholder="Mesto">
    </div>
    <div class="input-group">
      <span class="input-group-addon"><i class="glyphicon glyphicon-home"></i></span>
      <input type="text" class="form-control" [(ngModel)]="country" name="country" placeholder="Država">
    </div>
    <label>Datum rojstva:</label>
    <div class="input-group">
      <span class="input-group-addon"><i class="glyphicon glyphicon-home"></i></span>
      <input type="date" [(ngModel)]="dateOfBirth" name="dateOfBirth" class="form-control">
    </div>
    <input class="btn btn-primary" type="submit" value="Registriraj" />
    <input class="btn btn-secondary" type="reset" value="Prekliči" />
</form>
</div>

有人可以帮助我吗?我不知道如何从表单上获取上传的图像名称,以将其保存到我在register.component.ts中创建的用户对象。此外,我不知道如何获取日月和年,并将它们保存为方法onRegisterSubmit()中的用户对象中的字符串。

1 个答案:

答案 0 :(得分:0)

您可以将其更改为,

  console.log(this.image);

  console.log(this.user.image);