Я не могу получить свою ценность из моего ввода, чтобы быть сохраненным в моем app.component.ts

Question

Итак, я пытаюсь сохранить входные данные из моей формы в свойстве, но когда я отправляю, console.log возвращает undefined в самой консоли.

Это варианты, которые я пробовал, но не работал

<form>
<input #in1 type="text" id="username" placeholder="username" value="5">
<input type="password"  id="password" placeholder="password">
<input type="submit" (click)="onSubmit(in1.value)" id="submit" placeholder="submit">
</form>









<form #myForm="ngForm">
        <div class="form-group">
          <label for="exampleInputEmail1">Email address</label>
          <input type="email" id="Log-email" ngControl="Email" ([ngModel])="SUsername.Email"  aria-describedby="emailHelp" placeholder="Enter email">
          <small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
        </div>
        <div class="form-group">
          <label for="exampleInputPassword1" >Password</label>
          <input type="password" id="Log-pass" ngControl="pass" [(ngModel)]="SPassword.pass">
        </div>

        <button type="submit" class="btn btn-primary">Submit</button>
        <input type="button" (click)="test()" value="test">
      </form>

И вот его машинописная часть

SUsername:string; 
SPassword:string;

onSubmit(){
console.log(this.SUsername,this.SPassword);

}

Answer 1

Я сделаю с этим:

private model : any = { Email: "", pass : "" };

EDIT:

• HTML-код с (ngSubmit)="onSubmit()" и [(ngModel)] (который был уже ([ngModel]))

• Удалено <input type="button" (click)="test()" value="test">

HTML код:

<form #myForm="ngForm" (ngSubmit)="onSubmit()">
        <div class="form-group">
            <label for="exampleInputEmail1">Email address</label>
          <input type="email" id="Log-email" ngControl="Email" [(ngModel)]="model.Email" name="Email"  aria-describedby="emailHelp" placeholder="Enter email">
          <small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
     </div>
     <div class="form-group">
          <label for="exampleInputPassword1" >Password</label>
          <input type="password" id="Log-pass" name="Email" ngControl="pass" [(ngModel)]="model.pass">
      </div>

      <button type="submit" class="btn btn-primary">Submit</button>
</form>

Убедитесь:

вы написали [(ngModel)] не ([ngModel])

A working demo с вашим примером кода:)

Answer 2

у вас должен быть атрибут name для элемента тега Html, который совпадает с ([ngModel]) = "SUsername.Email"

Answer 3

SUsername и SPassword должны быть инициализированы как объекты

SUsername = {Email: ''}
SPassword= {pass: ''}