I am using angular 7 as a front end for my project and want to display input fields for user to fill data using reactive forms.
The problem is that the object i am trying to display is having multiple layers,so the first layer can have input which can be dynamically added (so that i use fb.array when building the form) and object which can be added dynamically with all things it contains which can have the same or even a different structure and so on .
i have achieved that but through static way that includes the following:
-determine how many inputs and objects can be added dynamically (i can know that through an attribute in the object and the inputs which have same structures but different types ,input,list,object....),
-add nested form for each object with its children.
which means i have to add some code when ever the object getting deeper.
How can i achieve that dynamically so that i pass the object regardless of how much layers is has , and display it as a nested forms and can that be done with reactive form or i have to change the entire method?
This is what i have already tried :
this.check = this.objects.filter(e=>e.Max>1);
if(this.check.length === 1){
this.parentA=this.check[0];
this.childrenA=this.parentA[0].filter(e=>e.type != "object");
this.form = this.fb.group({
'A': this.fb.array([
this.initA(),
])
});
}else if(this.check.length === 2){
.
.
this.form = this.fb.group({
'A': this.fb.array([
this.initB()
])
});
}
initA() {
const elementFormGroup = this.fb.group({});
this.childrenA.forEach(e => {
eFormGroup.addControl(e.Name,
this.fb.control([], Validators.required));
}
}
initY() {debugger
const elementFormGroup = this.fb.group({});
this.childrenB.forEach(e => {
elementFormGroup.addControl(e.Name,
this.fb.control([], Validators.required));
});
elementFormGroup.addControl('A', this.fb.array([
this.initA()
]))
return elementFormGroup;
}
.
.
.
.
I would appreciate any help because i am really stuck at this way.
Thank you.
Related
EDIT: THE IDEA BELLOW WORKS
I just noticed that the problem was in . notation of values I used. The path must be correctly converted to the same object structure as in case of tools changeValue).
Also, this code
...
const initialValues = form.getState().initialValues;
initialValues[fieldName] = fieldValue;
form.setConfig("initialValues", initialValues);
...
had to be changed to
...
const initialValues = form.getState().values;
initialValues[fieldName] = fieldValue;
form.setConfig("initialValues", initialValues);
...
as I wanted current values to be kept in the form instead of the form has to be "reinitialized".
I am using final-form for presenting a form partly generated dynamically based on the data templates and the data itself loaded from the server.
In order to generate the form and populate it with the values loaded from the server I am using custom mutator, which just sets the correct values once the form is generated and the data is loaded from the server.
Mutator works well, but I also need to set initialValues once the part of the form (based i.e. on initial value or user selected value of the combo box) is loaded and generated in order to prevent dirty state before the form is touched by the user.
Question: Is it possible to set initialValues dynamically, once the template/data is loaded in order to prevent pristine/dirty state, but also, without touching other form values and initialValues?
Please note, this is just example of children component used within the form declared in parent component (including the custom mutator). My original code is way too complex to pass it here. Maybe this code is not fully syntactically correct, maybe it would not work with checkbox, don't care too much about it - it is just an example and the question is about something else. Mutator works actually well, so please focus on initalValues.
interface Props {
fieldName: string;
fieldType: "checkbox" | "text";
fieldValue: string | boolean;
}
function DynamicFormField({
fieldName,
fieldType,
fieldValue
}: Props) {
const form = useForm();
useEffect(
() => {
// *** this is what I tried, but does not work ***
const initialValues = form.getState().initialValues;
initialValues[fieldName] = fieldValue;
form.setConfig("initialValues", initialValues);
// ***
// *** also tried ***
const initialValues = { ...form.getState().initialValues };
initialValues[fieldName] = fieldValue;
form.setConfig("initialValues", initialValues);
// ***
form.mutators.setValue(fieldName, fieldValue);
},
[fieldName, fieldValue]
)
}
return (
<Field name={fieldName}>
{({ input }) => (
{
fieldType === "checkbox" ?
(<input {...input} type="checkbox")
:
(<input {...input} type="text")
}
)}
</Field>
)
It works, please see edit.
The initialValues object must just have same structure as the values object.
The Angular Material documentation gives a nice example for how to add selection to a table (Table Selection docs). They even provide a Stackblitz to try it out.
I found in the code for the SelectionModel constructor that the first argument is whether there can be multiple selections made (true) or not (false). The second argument is an array of initially selected values.
In the demo, they don't have any initially selected values, so the second argument in their constructor (line 36) is an empty array ([]).
I want to change it so that there is an initially selected value, so I changed line 36 to:
selection = new SelectionModel<PeriodicElement>(true, [{position: 2, name: 'Helium', weight: 4.0026, symbol: 'He'}]);
This changes the checkbox in the header to an indeterminate state (as expected), but does not cause the row in the table to be selected. Am I setting the initial value incorrectly, or what am I missing here? How can I set an initially selected value?
Tricky one. You need to initialize the selection by extracting that particular PeriodicElement object from your dataSource input, and passing it to the constructor.
In this particular case, you could code
selection = new SelectionModel<PeriodicElement>(true, [this.dataSource.data[1]);
It's because of the way SelectionModel checks for active selections.
In your table markup you have
<mat-checkbox ... [checked]="selection.isSelected(row)"></mat-checkbox>
You expect this binding to mark the corresponding row as checked. But the method isSelected(row) won't recognize the object passed in here as being selected, because this is not the object your selection received in its constructor.
"row" points to an object from the actual MatTableDataSource input:
dataSource = new MatTableDataSource<PeriodicElement>(ELEMENT_DATA);
But the selection initialization:
selection = new SelectionModel<PeriodicElement>(true, [{position: 2, name: 'Helium', weight: 4.0026, symbol: 'He'}]);
happens with a new object you create on the fly. Your selection remembers THIS object as a selected one.
When angular evaluates the bindings in the markup, SelectionModel internally checks for object identity. It's going to look for the object that "row" points to in the internal set of selected objects.
Compare to lines 99-101 and 16 from the SelectionModel source code:
isSelected(value: T): boolean {
return this._selection.has(value);
}
and
private _selection = new Set<T>();
I was facing the same issue, I used dataSource to set the initial value manually in ngOnInit()
ngOnInit() {
this.dataSource.data.forEach(row => {
if (row.symbol == "H") this.selection.select(row);
});
}
If you do the following, it works too
selection = new SelectionModel<PeriodicElement>(true, [ELEMENT_DATA[1]])
To select all you can do
selection = new SelectionModel<PeriodicElement>(true, [...ELEMENT_DATA])
I hope the answer is helpful
Or more dynamically if you have a set of values and you want to filter them before:
selection = new SelectionModel<PeriodicElement>(true, [
...this.dataSource.data.filter(row => row.weight >= 4.0026)
]);
This gets more tricky if you have data loading asynchronously from an api. Here is how I did it:
Firstly I have implemented the DataSource from "#angular/cdk/table". I also have an RxJS Subject that fires whenever data is loaded (first time or when user changes page in the pagination section)
export abstract class BaseTableDataSource<T> implements DataSource<T>{
private dataSubject = new BehaviorSubject<T[]>([]);
private loadingSubject = new BehaviorSubject<boolean>(false);
private totalRecordsSubject = new BehaviorSubject<number>(null);
public loading$ = this.loadingSubject.asObservable();
public dataLoaded$ = this.dataSubject.asObservable();
public totalRecords$ = this.totalRecordsSubject.asObservable().pipe(filter(v => v != null));
constructor(){}
connect(collectionViewer: CollectionViewer): Observable<T[]>{
return this.dataSubject.asObservable();
}
disconnect(collectionViewer: CollectionViewer): void {
this.dataSubject.complete();
this.loadingSubject.complete();
this.totalRecordsSubject.complete();
}
abstract fetchData(pageIndex, pageSize, ...params:any[]) : Observable<TableData<T>>;
abstract columnMetadata(): {[colName: string]: ColMetadataDescriptor };
loadData(pageIndex, pageSize, params?:any[]): void{
this.loadingSubject.next(true);
this.fetchData(pageIndex, pageSize, params).pipe(
finalize(() => this.loadingSubject.next(false))
)
.subscribe(data => {
this.totalRecordsSubject.next(data.totalNumberOfRecords);
this.dataSubject.next(data.records)
});
}
}
Now when I want to pre-select a row, I can write a function like this in my component which hosts a table that uses an implementation of the above mentioned data source
selectRow(rowSelectionFn: (key: string) => boolean){
this.dataSource.dataLoaded$.pipe(takeUntil(this.destroyed$))
.subscribe(data => {
const foundRecord = data.filter(rec => rowSelectionFn(rec));
if(foundRecord && foundRecord.length >= 0){
this.selection.toggle(foundRecord[0]);
}
});
}
I want my angular material autocomplete to be a list of suggestions but not requirements. However I'm not sure how to implement as their is no clear example from the Angular Material docs.
In the example below my model is $ctrl.item.category
Clearly the example below is wrong, as my model is linked to md-selected-item, but this only works if I select an item. I want the user to be able to free enter the text if the item is not in the list. Basically how autocomplete already works in most browsers.
I see plenty of questions on how to disable this, but they are not trying to disable so much as clean up the left over text when an item is not selected. In these cases when an item is not selected then the model value is null, but text is left in the input.
I want the text left int he input to be the model value if the person does not select (or a match is not made).
md-autocomplete(
md-floating-label="Category Name"
flex="50"
md-input-name="category"
md-selected-item="$ctrl.item.category"
md-search-text="catSearch"
md-items="category in $ctrl.categories"
md-item-text="category"
md-min-length="0"
md-select-on-match=""
md-match-case-insensitive=""
required=""
)
md-item-template
span(md-highlight-text="catSearch" md-highlight-flags="^i") {{category}}
My options ($ctrl.categories) is an array of strings ['Food','Liqour'] and I wan the user to be able to use one of those or free enter Tables as their choice.
In this case you should link md-search-text to your model.
If you want to implement fuzzy search you have to write the filter method yourself. Look at this example:
template:
<md-autocomplete
md-items="item in $ctrl.itemsFilter()"
md-item-text="item.label"
md-search-text="$ctrl.query"
md-selected-item="$ctrl.selected"
>
<md-item-template>
<span md-highlight-text="$ctrl.query">{{item.label}}</span>
</md-item-template>
<md-not-found>
No item matching "{{$ctrl.query}}" were found.
</md-not-found>
<div ng-messages="$ctrl.myValidator($ctrl.query)">
<div ng-message="short">Min 2 characters</div>
<div ng-message="required">Required value</div>
</div>
</md-autocomplete>
controller:
var items = [ ... ];
ctrl.itemsFilter = function itemsFilter() {
return ctrl.query ? filterMyItems(ctrl.query) : items;
};
ctrl.myValidator = function (value) {
return {
short: value && value.length < 2,
required : value && value.length < 1,
};
};
then you just need to add filterMyItems method to filter your items
To improve the answer of #masitko, I have implemented the filter in a way, that it adds the query to the filtered list. So it becomes selectable and a valid option. So it's possible to make the autocomplete a suggestion box.
I'm using ES6 in my projects. But it should be easily adaptable to ES5 code.
myFilter() {
if (!this.query) return this.items;
const
query = this.query.toLowerCase(),
// filter items where the query is a substing
filtered = this.items.filter(item => {
if (!item) return false;
return item.toLowerCase().includes(query);
});
// add search query to filtered list, to make it selectable
// (only if no exact match).
if (filtered.length !== 1 || filtered[0].toLowerCase() !== query) {
filtered.push(this.query);
}
return filtered;
}
I am trying to have a dynamic if linking to a property of a different item in an array.
My current code:
Loader
for (...) {
var index = this.App.Data.Questions.push({
...
}) - 1;
if (CompareGuids(this.App.Data.Questions[index].QuestionId, '06EF685A-629C-42A5-9394-ACDEDF4798A5')) {
this.App.PregnancyQuestionId = index;
}
Template
{^{if ~root.Data.Questions[~root.PregnancyQuestionId].Response.ResponseText == "true"}}
{{include #data tmpl="Clinical-History-QuestionWrapper-SingleQuestion"/}}
{{/if}}
It works for the initial loading, but it does not update.
Note I assume I could achieve this with a boolean property in ~root, and then have a $.observable(...).oberserve(...) update this property, but I would prefer to have a direct access.
It looks like all you need to do is make sure that you are changing the PregnancyQuestionId observably. Just assigning a value cannot trigger data-linking to update the UI.
You need to write:
$.observable(this.App).setProperty("PregnancyQuestionId", index);
That should then trigger the binding correctly...
I am using kendoUI tree view with check boxes implementation.
I am able to check all children's check boxes,when i select the parent checkbox.
now,I want to get all the children's text values when i select the parent check box.
I used template for check box operation in tree view
$("#ProjectUsersTreeView [type=checkbox]").live('change', function (e) { var chkbox = $(this);
var parent = chkbox.parent();
var pBox = $(parent).closest('.k-item').find(":checkbox");
if (this.checked || pBox.length>0) {
$(pBox).prop('checked',this.checked ? "checked": "")
}
Instead of using your code for checking children I do recommend using KendoUI configuration option checkChildren.
tree = $("#ProjectUsersTreeView").kendoTreeView({
checkboxes:{
checkChildren: true
},
...
}).data("kendoTreeView");
Then for getting all selected text use:
$("#ProjectUsersTreeView [type=checkbox]").live('change', function (e) {
var checked = $("input:checked", tree);
$.each(checked, function(idx, elem) {
console.log("text", tree.text(elem));
})
});
In checked I get all input elements from the tree that are actually checked and display its text on console by getting it using text method.
NOTE: Realize that I've defined tree as $("#ProjectUsersTreeView").data("kendoTreeView") and then use it in change handler.