CODEWITHSUNDEEP
angular5angular-forms
3gwebtrain
3gwebtrain

Reputation: 15293

How to add name value to input element

I am looping a data, from the data, I am adding the name value into the input field, but not at all set. what is the issue here?

My form template:

<form novalidate name="myForm">
  <div ng-show="myForm[addVas.name].$error.pattern">Error will come </div>
  <div class="form-group">
    <input type="text" [(ngModel)]="addVas.input" [attr.disabled]="addVas.disabled ? '' : null " name="{{addVas.name}}" ng-pattern="/^[0-9]/" (blur)="addAdnlVasAfterInput(addVas)" placeholder="Provide value of shipment"
      class="form-control">{{addVas.name}} <!--getting value here-->
  </div>
</form>

I am not getting throw the error, when user input instead of number in to charters. how to solve that?

Now I have update my name field in to [name]="addVas.name" but I not confirm the name sent, unless if i get error message

Upvotes: 0

Views: 283

Answers (2)

Vega
Vega

Reputation: 28711

There are some confusions between Angular versions. ng-show should be *ngIf or [hidden] with reverse logic, ng-pattern is [pattern]. [attr-disabled] can be [disabled], etc.. Pattern /^[0-9]/ doesn't allow more than 1 digit, I am not sure it was your aim. If you use a property as pattern expression, the use [pattern]="property":

Here is what I suggest:

     <form #myForm>
        <input type="text" [(ngModel)]="addVas.input" 
             [disabled]="addVas.disabled" [pattern]="addVas.pattern"
             [name]="addVas.name" #input="ngModel">
        <div *ngIf="input.errors && (input.dirty || input.touched)" >
            <div [hidden]="!input.errors.pattern">
                Should be a number
            </div>
        </div>
    </form>

Demo

Upvotes: 1

Rachit Shroff
Rachit Shroff

Reputation: 135

The properties cannot perform interpolation. You need to use property binding for setting values to properties.

Try this:

[name]="addVas.name"

instead of 

name= "{{addVas.name}}"

Upvotes: 0

Related Questions