Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
864 views
in Technique[技术] by (71.8m points)

angular - Angular2 binding of "name" attribute in <input> elements with *ngFor

I am experimenting with Angular2 and Angular Material. I used *ngFor to let Angular generate the <input> elements for me. However, in the resulting webpage, the generated element does not have name attribute.

This is part of the code in order-form.component.html, which asks the user to input the number of different kinds of fruits:

<md-list-item>
  <md-icon md-list-icon>shopping_cart</md-icon>
  <md-input-container *ngFor="let fruit of fruits" class="fruit-input">
    <input mdInput [(ngModel)]="order[fruit]" [placeholder]="capitalize(fruit)" 
           [id]="fruit" name="{{fruit}}" required value="0" #fruitInput 
           (input)="onInput(fruitInput)">
  </md-input-container>
</md-list-item>

This is the corresponding order-form.component.ts:

import { Component, OnInit } from "@angular/core";
import { Order } from "app/order";
import { PAYMENTS } from "app/payments";
import { OrderService } from "app/order.service";

@Component({
  selector: 'app-order-form',
  templateUrl: './order-form.component.html',
  styleUrls: ['./order-form.component.css']
})
export class OrderFormComponent implements OnInit {

  order = new Order();

  payments = PAYMENTS;

  fruits: string[] = [
    'apples',
    'oranges',
    'bananas'
  ];

  constructor(public service: OrderService) {
  }

  ngOnInit() {
  }

  get totalCost() {
    return this.service.getTotalCost(this.order);
  }

  onFocus(element: HTMLElement) {
    element.blur();
  }

  onSubmit() {
    console.log('onSubmit');
  }

  onInput(element: HTMLInputElement) {
    console.log(element);
    if (!this.service.isValidIntString(element.value)) {
      window.alert(`Please input a correct number for ${element.name}`);
      element.value = '0';
    }
  }

  capitalize(str: string): string {
    return this.service.capitalize(str);
  }

  get debug() {
    return JSON.stringify(this.order, null, 2);
  }
}

In the Chrome browser, when I right click the 'apples' <input>, the name attribute of the element is empty, but the ng-reflect-name is set to apples correctly? How to resolve this problem? No name attribute here, but ng-reflect-name is apples

See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Answer

0 votes
by (71.8m points)

final answer

Use ([name]="fruit" or name="{{fruit}}") and ([attr.name]="fruit" or attr.name="{{fruit}}") together will work.

update

If you want to use the string 'fruit' as value for the name attribute, use

name="fruit"

or

name="{{'fruit'}}"

or

[name]="'fruit'"

otherwise you bind the value of the components field fruit (which your component doesn't seem to have)

original

Angular does property binding by default. If you want attribute binding you need to make that explicit

 attr.name="{{fruit}}" (for strings only)

or

 [name]="fruit"

See also


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...