Блог

У меня есть следующая форма:

 <form class="form-margin cart-container" #form="ngForm" (ngSubmit)="submitForm()">
    <div style="flex-direction: column">
        <app-cart-item class="cart-item" *ngFor="let pr of productRecordList" [productRecord]="pr"></app-cart-item>
        <br />
        <p style="font-family: Verdana, Geneva, Tahoma, sans-serif; font-weight: bolder">Total ${{ getTotal() }}</p>
    </div>

    <div class="cart-item-details">
        <!-- <input type="text" cols="35" rows="2" placeholder="(minimum 3 characters)" required minlength="3" [(ngModel)]="fullName" #ffullName="ngModel"/> -->

        <p>Full Name</p>
        <input type="text" cols="35" rows="2" placeholder="(minimum 3 characters)" required minlength="3" />
        <br />
        <p>Address</p>
        <input type="text" cols="35" rows="2" placeholder="(minimum 6 characters)" required minlength="6" />
        <br />
        <p>Credit card number</p>
        <input type="text" cols="35" rows="2" placeholder="(16-digits number)" required minlength="16" maxlength="16" />
        <br />

        <p>We will never share your payment details to anyone</p>
        <input type="submit" class="btn btn-primary" name="Submit" routerLink="/confirmation" />
    </div>
</form>
 

Класс TypeScript предоставляется:

 import { ProductsService } from './../../services/products.service';
import { Component, OnInit } from '@angular/core';
import ProductRecord from 'src/app/services/products.service';

@Component({
    selector: 'app-cart',
    templateUrl: './cart.component.html',
    styleUrls: ['./cart.component.css']
})
export class CartComponent implements OnInit {
    productRecordList: ProductRecord[] = [];

    fullName: string = '';
    address: string = '';
    cardNumber: number = 0;

    totalPrice: number = 0.0;

    constructor(private productsService: ProductsService) {}

    ngOnInit(): void {
        this.productRecordList = this.productsService.getProductsFromCart();
    }

    getTotal(): number {
        this.totalPrice = this.productsService.getProductsPriceTotal();

        return this.totalPrice;
    }

    submitForm(): void {

      // console.log(this.fullName);
      // console.log(this.totalPrice);
    }
}
 

Я хотел бы зафиксировать fullName значение при отправке формы, поэтому я изменил <input> тег, как показано ниже:

 <input type="text" cols="35" rows="2" placeholder="(minimum 3 characters)" required minlength="3" [(ngModel)]="fullName"/>
 

Это делается для того, чтобы я мог зафиксировать значение в fullName поле в соответствующем классе. Однако это нарушает кодекс.

Я получаю сообщение об ошибке:

 ERROR Error: If ngModel is used within a form tag, either the name attribute must be set or the form
      control must be defined as 'standalone' in ngModelOptions.
 

Как я могу захватить поле при отправке?

Попробуйте это:

<тип ввода=»текст» cols=»35″ строк=»2″ заполнитель=»(минимум 3 символа)» требуемая минимальная длина=»3″ [(ngModel)]=»Полное имя» имя=»Полное имя»/>

Когда вы используете @angular/формы, Angular превращает вашу форму в группу форм. Когда вы добавляете [ngModel] на свой ввод, Angular создаст элемент управления формой внутри вашей группы форм с заданным атрибутом name. Когда вы решаете использовать [ngModelOptions]=»{автономный: true}», этого не происходит.

Таким образом, вы можете решить свою проблему, добавив [ngModelOptions]="{standalone: true}" свои данные.

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