Develop Reference

Not able to pass string to formGroup

1.I want to loop through an array
*ngFor="let item of myformNameArray"
Think myformNameArray.length have 3 items
If I console item it will be like
myFormName1
myFormName2
myFormName3
I have already made these form group in my typescript component.
Example
<form [formGroup]="myFormName3">
It will work perfectly!!
But i want to loop :means
<div *ngFor="let item of myformNameArray">
<form [formGroup]="{{item}}">
</form>
</div>
So when I do,
[formGroup]="{{item}}"
It throws me an error can't assign to object or interpolation
Or
[formGroup]="see(item)"
Where ,
see(item) :string {
return String(item);
}
ERROR TypeError: can't assign to property "validator" on "see(item)": not an object

[formGroup] requires a FormGroup Object not string
you need to make array of formgroups instead of string names
TS:
myformArray = [
this.myFormOne,
this.myFormTwo,
this.myFormThree
]
HTML:
<div *ngFor="let item of myformArray">
<form [formGroup]="item">
</form>
</div>
you can also use formArray instead of normal array
TS:
myFormArray = new FormArray([]);
this.myFormArray.push(myFormOne);
this.myFormArray.push(myFormTwo);
this.myFormArray.push(myFormThree);
HTML:
<div *ngFor="let form of myFormArray.controls;">
<form [formGroup]="form">
<input formControlName="controlOne" />
<input formControlName="ControlTwo" />
</form>
</div>
And also you should not use both square brackets and curly brackets (interpolation) for property binding, use either square brackets or interpolation.
internally angular converts square brackets to interpolation
either do this : [formGroup]="item"
or this : formGroup="{{item}}"
not both

Is there a way to pass vue model values into method function?

I recently started using Vue Js and I am stuck at this point where I cant pass vue model values to method function.
<div v-for="(post, index) in posts" :key="post.customerName">
<input type="text" v-model="post.customerName" /> /** successfully print customerName inside this field**/
<b-button block pill variant="outline-info" v-on:click="bookerName()">
{{post.customerName}}
</b-button>
</div>
Method Function
bookerName(){
console.log(this.post.customerName); /** prints out UNDEFINED **/
}
VUE data return
posts:{
customerName:{ 'David','John','Sam'},
},
bookerName: ''

Pass the index from v-for to the method, and get the value by index:
<b-button v-on:click="bookerName(index)">
...
bookerName (index){
console.log(this.posts[index])
}
Also, in your example you have bookerName: ''. Is it a property inside data()? If so, you cannot have method with the same name bookerName

Binding ng model by key of loop issue

I'm trying to bind value to ng-model="" directive because I'm displaying elements with it in loop.
I tried like this
<div class="form-group">
<div data-ng-repeat="(key, n) in langInput.values">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 u-no-padding">
<label class="sell__label" for="auction_name_account_{{n.selected }}">Główna nazwa Twojej aukcji ({{n.selected }}):</label>
<div class="pst-relative">
<input type="text"
id="auction_name_account_{{n.selected }}"
class="form-control"
name="auction_name_account"
data-ng-model="inputs.auction_name_account[key]"
data-ng-minlength="10"
data-ng-maxlength="60"
required />
<span class="sell__input-text sell__input-text--big-input" data-ng-show="sellItem.auction_name_account.$error.required">Wymagane!</span>
<span class="sell__input-text sell__input-text--big-input" data-ng-show="sellItem.auction_name_account.$error.minlength">Za krótkie!</span>
<span class="sell__input-text sell__input-text--big-input" data-ng-show="sellItem.auction_name_account.$error.maxlength">Za długie!</span>
</div>
</div>
</div>
I need to have unique models to firstly create working validation (spans below) and to gather and send data to rest api later on.
This [key] somehow doesn't print as key of object which is number but as normal string as I see in console.
Data of langInput is
$scope.langInput = {
values: [
{
id: 1,
selected: "pl"
},
{
id: 2,
selected: "eng"
}
],
And I would like to have ng-model="inputs.auction_name_account[1]" where 1 is binded value or something similiar. Also above array of objects changes.

auction_name_account is going to be an Object when it's produced.
This means all property accessors must be a string and that properties which aren't a string, will be typecasted into one. This is why, while key is an integer, it will be casted as a string upon usage.
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Property_accessors#Property_names

Angular 2: TypeError: l_thing0 is undefined in [{{thing.title}} in AppComponent#4:44]

I'm getting a strange error in my app. It's supposed to print out {{thing.title}} from an object, but it shows an error in the console:
EXCEPTION: TypeError: l_thing0 is undefined in [{{thing.title}} in AppComponent#4:44]
I'm not sure where l_thing0 is coming from. If I try to show {{thing}}in the page, it displays [object Object]. If I try to JSON.stringify(this.thing) (see the showObj() function), it correctly displays the stringified object. But if I try to access an attribute like {{thing.title}} I get the error that l_thing0 is undefined.
Here is app.component.ts:
import {Component, OnInit} from 'angular2/core';
import {Thing} from './thing';
import {ThingService} from './thing.service';
import {SubThingComponent} from "./subthing.component";
#Component({
selector: 'thing-app',
template: `
<div class="container">
<div class="row">
<div class="col-md-12">
<h1>{{thing.title}} Show Stringified Obj</h1>
<subthing></subthing>
</div>
</div>
</div>
`,
styles:[`
`],
directives: [SubThingComponent],
providers: [ThingService]
})
export class AppComponent implements OnInit {
constructor(private _thingService: ThingService) { }
public thing: Thing;
showObj() {
// This correctly shows the stringified object
alert(JSON.stringify(this.thing));
}
getThing() {
this._thingService.getThing().then(thing => this.thing = thing);
// This correctly logs the object
setTimeout(() => {console.log('thing', this.thing)}, 5000);
}
ngOnInit() {
this.getThing();
}
}
Any ideas?

The issue is that the first time you load the page, thing is still undefined, it gets set to its real value later on asyncronously, so the first time it tries to access the property, it will throw an exception. The ? elvis operator is a shortcut to a nullcheck:
{{thing?.title}}
But its usually a best idea more performant not even try to render the component at all until you have the real object by adding something like:
<h1 *ngIf="thing">
to the container.

though I am coming late to the party but thought this might help for those who're using Angular 5.
Strangely noticed the elvis operator will not work in *ngFor loop, but works for *ngif. So here's my code to address the issue.
<div *ngIf = "fullObject?.objProperty">
<h1>{{fullObject.objProperty1}}</h1>
<div *ngFor = "let o of fullObject.objPropertyArray">
<h3>{{o._subheader}}</h3>
<p>
{{o._subtext}}
</p>
</div>
</div>
</div>

You could also set a new variable isFinished to false before retrieving data from server or async function and after receiving the data set it to true. Then put isFinished variable in *ngIf to check if server/function process is done?

I am using Angular 8 and although the data is shown, I also had this error and googling it brought me to this question. The accepted answer (though well explained) did not solve it for me. (Maybe because of a newer version, or the use with *ngFor)
It does not suffice to just use *ngIf, as you can see:
throws error: v1
<div class="row">
<pre>
<li *ngFor="let obj of object.content">{{obj | json}}</li>
</pre>
</div>
throws error: v2
<div class="row" *ngIf="object.content">
<pre>
<li *ngFor="let obj of object.content">{{obj | json}}</li>
</pre>
</div>
throws error: v3
<div class="row" *ngIf="object.content">
<pre>
<li *ngFor="let obj of object?.content">{{obj | json}}</li>
</pre>
</div>
no error: v1
<div class="row">
<pre>
<li *ngFor="let obj of object?.content">{{obj | json}}</li>
</pre>
</div>
no error: v2
<div class="row" *ngIf="object?.content">
<pre>
<li *ngFor="let obj of object.content">{{obj | json}}</li>
</pre>
</div>
no error: v3
<div class="row" *ngIf="object?.content">
<pre>
<li *ngFor="let obj of object?.content">{{obj | json}}</li>
</pre>
</div>

how to make autocomplete in angularjs (filter list not display )

I am trying to make autocomplete in angular js .But when I type anything on text field it not reflect on view In other word it not give filter list after typing on text field .I have station name and station code .I need to filter my list with filter code. here is my code
http://codepen.io/anon/pen/xGxKKE
When I type "B" it should display the list which have station code started from "B" . could you please tell me where i am doing wrong ?
<ion-content>
<div class="list">
<label class="item item-input">
<span class="input-label">StationName</span>
<input type="text" ng-model="station.stationCode" class="bdr">
</label>
</div>
<div class="list">
<li class="item" ng-repeat="station in data.data">{{station.stationName+"-("+station.stationCode+")"}}</li>
</div>
</ion-content>

You weren't actually filtering the list:
http://codepen.io/anon/pen/rVNBOO
Added:
$scope.startsWith = function (actual, expected) {
var lowerStr = (actual + "").toLowerCase();
return lowerStr.indexOf(expected.toLowerCase()) === 0;
};
and changed ng-repeat:
ng-repeat="station in data.data | filter:station.stationCode:startsWith"
Edit:
The code in startsWith takes the actual value (the stationName in your case) and checks to see if it finds the searched characters at the beginning of the string. If indexOf "your searched string" is === 0 - then the string starts with those characters.

<li class="item" ng-repeat="station in data.data | filter:station.stationCode">
This will allow the list to filter based on the content in textbox.
Note: this will work as Contains filter rather than StartsWith.