Angular 角度-无法从ngForm获取.ts文件中的电子邮件值

我想在

.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>

我在控制台日志中只看到密码的值，在电子邮件中看不到

{密码：“123456”}

---

由于您使用的是双向数据绑定，因此可以在.ts中定义变量

admineal

和

password

。现在，在提交中，您可以执行以下操作：

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

---

您可以使用FormGroup并定义这两个属性

.html文件

<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>

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();
    }

}

---

试着给你的

电子邮件

一个

名称

属性，看看是否有效？如果您的

密码

正常工作，只需遵循与

电子邮件

相同的模式即可。由于您使用的是双向数据绑定，因此可以在.ts中定义变量

adminemail

和

password

。现在在提交中，您可以执行以下操作：

onSubmit（form:NgForm）{console.log（this.adminemail）；console.log（this.password）；}

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();
    }

}