We Keep Coding

Angular Reactive Form with dynamic fields

I'm currently battling with Angular form array.
I have a form in which I add the fields dynamically.
I have created the form object:
this.otherDataForm = this.fb.group({
});
I add the dynamic fields like this:
addField(field: CustomFormField): void {
this.otherDataForm.addControl(id_campo, new FormControl('', Validators.required));
}
I loop through those fields:
<form *ngIf="selectedProfile" [formGroup]="otherDataForm">
<div class="mb-3" *ngFor="let field of fields; let i = index">
<label>{{field.descripcion}}</label>
<input class="form-control" [formControlName]="field.id_campo" type="number">
</div>
</form>
But I can't seem to get control of the errors of each field to show a validation message if the field is required.
Anyone can help me with this one?
Maybe there is a better way to do this.

well, I feel more comfortable using directly the constructor of formControl and formGroup
fields=[{id:'one',label : 'one',value:1},{id:'two',label : 'two',value:2}]
form=new FormGroup({})
ngOnInit()
{
this.fields.forEach(x=>{
this.form.addControl(x.id,new FormControl(x.value,Validators.Required))
})
}
<form [formGroup]="form">
<div *ngFor="let field of fields">
<input [formControlName]="field.id">
<div class="error" *ngIf="form.get(field.id).touched &&
form.get(field.id).invalid">Required</div>
</div>
</form>
{{form?.value|json}}
But you can use directily [formControl] in the input
<form [formGroup]="form">
<div *ngFor="let field of fields">
<label>{{field.label}}</label>
<input [formControl]="form.get(field.id)">
<div class="error" *ngIf="form.get(field.id).touched &&
form.get(field.id).invalid">Required</div>
</div>
</form>
Even, you can iterate over form.controls|keyvalue
<form [formGroup]="form">
<div *ngFor="let control of form.controls |keyvalue;let i=index">
<label>{{fields[i].label}}</label>
<input [formControl]="control.value">
<div class="error" *ngIf="control.value.touched &&
control.value.invalid">Required</div>
</div>
</form>
see stackblitz

ngModel is reflecting to all textareas

I have multiple textareas (looping with ngFor and adding new divs with textareas inside). What i need is for every textarea to have separate ngModel and i don't want to directly bind this to property from object in dataArray - for example:
[(ngModel)]='data.note' or [(ngModel)]='data.feedback' .
This works but I don't have feedback property in dataArray so it won't for work for second textarea.
For example with my current implementation change in one textarea is reflecting in all other textareas. I tried with index approach but getting error:
ERROR TypeError: Cannot read property '1' of undefined
<div *ngFor="let data of dataArray; let index=index;trackBy:trackByIndex;">
<div class="card-body">
<form class="form">
<div class="form-body">
<div class="row">
<div class="col-md-6">
<div class="form-group">
<textarea name="note" [(ngModel)]='selectedNote' class="form-control"
rows="2"></textarea>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="form-group">
<textarea name="feedback" [(ngModel)]='selectedFeedback' class="form-control" rows="4"></textarea>
</div>
</div>
</div>
</div>
</form>
</div>
With current code if i add some text in first textarea with name 'note' that change is reflected for all textareas with name 'note'. As mentioned tried with adding
[(ngModel)]='selectedFeedback[index]' but i am getting error.
Also tried with giving different names to textareas:
<textarea name="note{{index}}" [(ngModel)]='dataArray[index]' rows="2"></textarea> OR
<textarea name="note{{index}}" [(ngModel)]='selectedNote' rows="2"></textarea>
but change is reflecting for each textarea again.

You can try it with any array, I am using data(n) function to return an Array of length n. In this example it's just for iteration
<div *ngFor="let item of data(8); let i = index">
<textarea [(ngModel)]='values[i]'></textarea>
</div>
// To reflect changes
<div *ngFor="let item of data(8); let i = index">
<div>{{ values[i] }}</div>
</div>
With TS
export class AppComponent {
values = [];
data(n) {
return Array(n);
}
}
Working example in Stackblitz.com

ngModel binds with the name property. So if you want to use multiple textarea try using different name attribute. You can iterate over like -
<ng-container *ngIf="let data of dataArray; index as i">
<textarea name="feedback_{{i}}" [(ngModel)]='selectedFeedback' class="form-control" rows="4"></textarea>
</ng-container>

How to disable a Dynamic forms in Angular2

I have created a dynamic form based on data[fields] from JSON, but I need the form to be initially disabled, so that when we click on Edit then only form becomes editable.
Here is my code for form:
<div class="col-md-8 " [ngSwitch]="fieldInfo.dataTypeName">
<input *ngSwitchCase="'Text'"
class="form-control"
[(ngModel)]="pageInfoBeans.nameValueMap[fieldInfo.name]"
name="{{fieldInfo.name}}"
[required]="fieldInfo.preRequiredInd"
[maxLength]="fieldInfo.fieldSize">
<input *ngSwitchCase="'Email Address'"
type="email"
class="form-control"
[(ngModel)]="pageInfoBeans.nameValueMap[fieldInfo.name]"
name="{{fieldInfo.name}}"
[required]="fieldInfo.preRequiredInd"
[maxLength]="fieldInfo.fieldSize">
and in my component HTML which populates from above switch case :
<app-form class="" [fieldInfo]="fieldItem.fieldInfo" [pageInfoBeans]="pageInfoBeans"></app-form>

Initially set the form to disabled.
component.ts
showForm?:boolean = false;
component.html
<button (click)="showForm = !showForm">Edit</button>
<form *ngIf="showForm">
...form markup
</form>

You need to do something like this:
<button class='form-control' (click)='isEditable = !isEditable'>Edit Mode</button>
<div class="col-md-8 " *ngIf='isEditable' [ngSwitch]="fieldInfo.dataTypeName">
<input *ngSwitchCase="'Text'"
class="form-control"
[(ngModel)]="pageInfoBeans.nameValueMap[fieldInfo.name]"
name="{{fieldInfo.name}}"
[required]="fieldInfo.preRequiredInd"
[maxLength]="fieldInfo.fieldSize" />
<input *ngSwitchCase="'Email Address'"
type="email"
class="form-control"
[(ngModel)]="pageInfoBeans.nameValueMap[fieldInfo.name]"
name="{{fieldInfo.name}}"
[required]="fieldInfo.preRequiredInd"
[maxLength]="fieldInfo.fieldSize" />
</div>

[disabled]="!isEditable" where initialize isEditable = 'disabled' this could be added in both the text and email input fields.
Also in your edit button you can add a callback for click where you can set isEditable = ''.

#Directive({
selector : ["canbedisabled"]
})
export class Canbedisabled{
constructor(private el: ElementRef) {
}
#Input()
set blocked(blocked : boolean){
this.el.nativeElement.disabled = blocked;
}
}
<input formControlName="first" canbedisabled [blocked]="isDisabled">
You can solve it with a Directive. A directive named Canbedisabled and a property "blocked", for example. Write a setter for blocked and set it to nativelement.disabled property.
refer: https://github.com/angular/angular/issues/11271

Razor View - jQuery .val() is updating some components visually -- but not all

I have a search feature built into a page that hits an API to get a list of items if a user chooses to search instead of manually enter (in an attempt to get some clean data). I have the first column of said table set to call a JavaScript function onclick. That function looks similar to this:
function loadDataFromTable(fname, lname, mname, stn, grade, school) {
$('#StudentFirstName').val(fname);
$('#StudentLastName').val(lname);
if (mname !== "undefined") {
$('#StudentMiddleName').val(mname);
}
else {
$('#StudentMiddleName').val('');
}
$('#StudentNumber').val(stn);
$('#Grade').val(grade);
$('#School').val(school);
return false;
}
The associated HTML elements are all ASP.NET Core Razor View input elements. They look like this:
<div class="form-group">
<label class="col-md-3 control-label">Last Name</label>
<div class="col-md-9">
<input type="text" asp-for="StudentLastName" class="form-control" />
<span asp-validation-for="StudentLastName" class="text-danger"></span>
</div>
</div>
<div class="form-group">
<label class="col-md-3 control-label">STN</label>
<div class="col-md-9">
<input type="text" asp-for="StudentNumber" class="form-control" />
<span asp-validation-for="StudentNumber" class="text-danger"></span>
</div>
</div>
<div class="form-group">
<label class="col-md-3 control-label">Grade</label>
<div class="col-md-9">
<input type="text" asp-for="Grade" class="form-control" />
<span asp-validation-for="Grade" class="text-danger"></span>
</div>
</div>
<div class="form-group">
<label asp-for="School" class="col-md-3 control-label"></label>
<div class="col-md-9">
<select asp-for="School" asp-items="ViewBag.SchoolList" class="form-control"></select>
<span asp-validation-for="School" class="text-danger"></span>
</div>
</div>
Now, if a user clicks on one of the links from the table, all of the values are properly passed into the function, and all of the values for First Name, Last Name, Middle Name, and STN properly update on the view. Grade and School do not update on the View, but their value attribute does update. When I submit the form after the data fills, the correct values are passed to my controller.
What I can't figure out is why the Grade and School values are not populating on the view. The only thing that stands out as different for these two are within the model they are nullable integers, whereas other fields are strings.
I have tried a mixture of .attr('value', grade), .text(grade), and .val(grade), and none of them are working. I can verify that the proper elements are being selected because if I output $('#Grade') I get the input object.

Angularjs: Dynamic Input in a single array for row

I'm a newbie and I need some help for something you'll maybe find too easy.
I want to add with a single button different inputs at the same time.
I don't know how to manage.
This is what I'm doing, and I'm blocked.
I'll thank you your ideas.
So, my form shows each name and an input box for entering the age of that person (We don't know how many persons are in 'people').
And in the end, an 'submit' button that calls the showAll() function.
And then, I just want to show the content of the array in console.log
A Form like this:
Form with only 3 people
HTML:
<form name="myForm3">
<div class="form-group row" ng-repeat="person in people track by $index">
<label for="player" class="col-xs-3 col-form-label text-right">{{ person.name }}</label>
<div class="col-xs-2">
<input class="form-control" type="text" ng-model="person.age[$index]" required>
</div>
</div>
<button type="submit" class="btn btn-success btn-lg" ng-click="showAll()" >Show all</button>
</form>
controller.js:
$scope.person = [];
// POST
$scope.showAll = function() {
for (var i=0; i < person.length; i++){
console.log('person: ' + {{ $scope.person[i] }} );
}
}

you can hide the inputs by using ng-if or ng-hide and show them on showAll by setting that variable used by those to true or false:
<div class="col-xs-2" ng-if="person.show">
<input class="form-control" type="text" ng-model="person.age[$index]" required>
</div>
And in showAll:
$scope.showAll = function() {
for (var i=0; i < $scope.people.length; i++) {
$scope.people[i].show = true;
}
};