Angular - невозможно получить значение электронной почты в файле .ts из ngForm

Question

Я хочу получить значение формы в файле .ts. Ниже мой код:

<div class="wrapper">
      <form autocomplete="off" class="form-signin" method="post" (ngSubmit)="loginForm.form.valid && onSubmit(loginForm)" #loginForm="ngForm">
        <div class="text-center mb-4">
            <h1>Sign In</h1>
        </div>

        <div class="form-label-group">
            <label>Email</label>
            <input 
              type="email" 
              id="input-email" 
              [(ngModel)]="adminemail" 
              #admin_email="ngModel" 
              class="form-control" 
              placeholder="Email address" 
              autocomplete="email" autofocus [ngModelOptions]="{standalone: true}">
        </div>

        <div class="form-label-group">
            <label>Password</label>
            <input 
              type="password" 
              class="form-control" 
              placeholder="Password" 
              autocomplete="new-password" 
              name="password"
              id="input-password"
              [(ngModel)]="password">
        </div>
        <button class="btn btn-lg btn-primary btn-block" type="submit">Sign in</button>
        <div>
          <p>
            <a routerLink='/pages'>Forgot Password</a>
          </p>
        </div>
    </form>
</div>

В файле .ts у меня есть следующий код .html:

import { NgForm } from '@angular/forms';
...
...
onSubmit(form: NgForm) {
  console.log(form.value)
}

Я вижу только значение пароля в журнале консоли а не адрес электронной почты.

{пароль: "123456"}

Answer 1

Поскольку вы используете двустороннюю привязку данных, вы можете определить переменные adminemail и password в .ts. Теперь в представлении вы можете сделать:

onSubmit() { 
   console.log(this.adminemail); 
   console.log(this.password);
}

Answer 2

Вы можете использовать FormGroup и определить эти два свойства.

. html file

<form bind-formGroup="checkoutForm" (ngSubmit)="onSubmit(checkoutForm.value)">
        <div>
            <label for="name">Name: </label>
            <input id="name" type="text" formControlName="name" />
        </div>
        <div>
            <label for="address">Address: </label>
            <input id="address" type="text" formControlName="address" />
        </div>

        <button class="button" type="submit">Purchase</button>
    </form>

.ts File

export class CartComponent implements OnInit {
    selectedProducts: ProductDto[] = [];
    checkoutForm: FormGroup;

    constructor(private cartService: CartService, private formBuilder: FormBuilder) {
        this.checkoutForm = this.formBuilder.group({
            name: '',
            address: ''
        });
    }

    ngOnInit() {
        this.selectedProducts = this.cartService.getProductsFromCart();
    }

    onSubmit(customerData: UserDto): void {
        // Process Checkout Data here
        console.warn(`Your order has been submitted with Name: ${customerData.name} Address: ${customerData.address}`);

        this.selectedProducts = this.cartService.clearSelectedProducts();
        this.checkoutForm.reset();
    }

}