I'd like to iterate over multiple input fields which are defined like this:
<input placeholder="Name" name="name" value="x.y">
<input placeholder="Description" name="description" value"x.z">
<!-- And more fields -->
or like this:
<input *ngFor="let x of y" name="{{x}}" value="{{x.y}}">
Now I want to interate over them, edit their value and give the edited values back to the input field.
Is this what you are looking for ?
<input *ngFor="let x of y" [name]="x.name" [(ngModel)]="x.value">
Try the following (*component.html):
<div>
<input type="text" *ngFor="let key of myObjectKeys"
[placeholder]="key"
[name]="key"
[(ngModel)]="myObject[key]" />
</div>
<div>
{{ diagnostic() }}
</div>
inside the *component.ts class body:
myObject = { Name: '', Description: '' }
myObjectKeys = Object.keys(this.myObject)
diagnostic() {
return JSON.stringify(this.myObject)
}
... you could also use a pipe to get object keys:
https://stackoverflow.com/a/35536052/2644437
*note: to use ngModel directive in angular 4 you also need FormsModule to be imported in the module your component is declared:
import { FormsModule } from '#angular/forms';
//...
imports: [
//...
FormsModule
]
Related
I started vue 3 today, and opted for the class-based approach in the cli. I'm from the Angular background, so forgive me for thinking like Angular. Every example I see (even in the docs) is still using the Vue({...}) thing, however, I wanna do something like this (still thinking Angular-ish)
In angular, I can do this
<form #formData="ngForm" (ngSubmit)="onSubmit(formData.value)">
<input (ngModel)="name" name="name" placeholder="name">
</form>
Then in component
...
export class AppComponent {
public name!: string;
onSubmit(formData: string) {
console.log(formData)
}
}
What would be the vue 3 class components approach like the above?
I currently have this in vue 3
export default class Welcome extends Vue {
name!: string;
onSubmit(formData: any) {
console.log(formData)
}
}
<template>
<div>
<form #submit.prevent="onSubmit">
<p>
<label for="name">Name</label> <br>
<input type="text" placeholder="name" id="name" name="name" v-model="name"/>
</p>
<button type="submit">Send</button>
</form>
</div>
</template>
What changes do I need to do to the above to connect the form in template to the component?
Without a third party library there isn't the same type of functionality that angular provides. Angular is doing a bunch of additional things to enhance the form object for validation and value tracking, and Vue natively does not do that. However you could instead put your data properties in an object to group them together. That way when you need to access them in something like the submit event to perhaps send all the values to an API, you can simply refer to that object instead of having to handle/build each property separately:
Class:
export class AppComponent {
// create object with bound form properties
public values: { name: string; } = { name: '' };
onSubmit() {
console.log(this.values); // { name: '' }
// axios.post('/api', this.values).then(res => console.log(res.data));
}
}
Template:
<template>
<div>
<form v-on:submit.prevent="onSubmit">
<p>
<label for="name">Name</label> <br>
<input type="text" placeholder="name" id="name" name="name" v-model="values.name"/>
</p>
<button type="submit">Send</button>
</form>
</div>
</template>
That being said, if you do need advanced form features like validation, sanitization, and similar there are plenty of libraries that do it well.
Hopefully that helps!
The native FormData constructor takes a <form> element, which creates the values of the form for all named inputs (<input>s or <textarea>s with name attribute).
So you could update your onSubmit method to retrieve the form data values:
export default class Welcome extends Vue {
name!: string;
onSubmit(formData: any) {
const form = e.target
const formData = new FormData(form)
}
}
Example using the Options API:
<template>
<div>
<form #submit.prevent="onSubmit">
<p>
<label for="name">Name</label> <br>
<input type="text" placeholder="name" id="name" name="name" v-model="name"/>
</p>
<button type="submit">Send</button>
</form>
</div>
</template>
<script>
export default {
methods: {
onSubmit(e) {
const form = e.target
const formData = new FormData(form)
console.log({ formData: Array.from(formData.entries()) })
}
}
}
</script>
demo
I'm facing the following issue and I am unsure how to solve it, here is a minimal example https://stackblitz.com/edit/angular-ivy-vwq15f .
In this example I am trying to bind the two input field (name and gender)
<div formArrayName="formArray" class="column">
<div [formGroupName]="inspectedForm">
<h1>Input field for Person {{inspectedForm +1}}</h1>
<label for="name">name</label>
<input formControlName="name" type="text" class="input" placeholder="Name">
<label for="gender">gender</label>
<input formControlName="gender" >
</div>
dynamically to an element inside a FormArray. By clicking on the person (Person #1) I want to be able to change the specific properties that person with the provided input fields. The solution should be capable of selecting a person to edit the properties WITHOUT generating new Input fields.
I guess I must somehow bind to the formControlName of the specific Input like [formControlName="blabla" but I am very unsure.
Thanks a lot in advance :)
My html looks like this
<form [formGroup]="parentForm">
<div *ngFor="let rule of arrayForm.controls; let i = index" class="button is-fullwidth not-clickable">
<button (click)="changeInspectedElement(i)">Person {{i +1}}</button>
</div>
<button (click)="addElement()">Add Element</button>
<div formArrayName="formArray" class="column">
<div [formGroupName]="inspectedForm">
<h1>Input field for Person {{inspectedForm +1}}</h1>
<label for="name">name</label>
<input formControlName="name" type="text" class="input" placeholder="Name">
<label for="gender">gender</label>
<input formControlName="gender" >
</div>
</div>
</form>
<p>
{{parentForm.value | json}}
</p>
My .ts looks like this
import { Component } from '#angular/core';
import { FormArray, FormBuilder, FormGroup } from '#angular/forms';
#Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
parentForm: FormGroup
inspectedForm: number = 0
constructor(private _fb: FormBuilder,) {
this.parentForm = this._fb.group({
formArray: this._fb.array([
this.createArrayForm()
])
})
}
createArrayForm() {
return this._fb.group({
name: [''],
gender: ['']
})
}
changeInspectedElement(index) {
let value = this.arrayForm.value[index]
this.inspectedForm = index
}
addElement() {
this.arrayForm.push(this.createArrayForm())
}
get arrayForm() {
return this.parentForm.get('formArray') as FormArray
}
}
Please let me know if there is anything unclear about my question.
You has a FormArray of FormGroup, so, you can create a function that return this formGroup
getGroup(index)
{
return (this.parentForm.get('formArray') as FormArray).at(index) as FormGroup
//or using your function arrayForm
//return this.arrayForm.at(index) as FormGroup
}
So, you can feel free to use this function in html to indicate FormGroup
<div [formGroup]="getGroup(inspectedForm)">
<input formControlName="name" type="text" class="input" placeholder="Name">
<input formControlName="gender" >
Yes, it's not necesary use FormArray. futhermore, in the .html has no reference to parentForm. Well the only you need is that your buttons change the variable inspectedForm.
<button (click)="inspectedForm=i">Person {{i +1}}</button>
your forked stackblitz
My data is stored in an array. For each array item, there should be a text input in the form. When the user types into one of the text inputs, the array should be updated with the new values.
<div class="form-group" v-for="synonym in row.synonyms">
<input type="text" class="form-control" v-model="synonym" />
</div>
Here's a fiddle: https://jsfiddle.net/eywraw8t/122210/
The idea is when you type into one of the textboxes, the array value (shown below in that fiddle) should also update, but it doesn't.
Upon inspecting the console, you would find the following error:
You are binding v-model directly to a v-for
iteration alias. This will not be able to modify the v-for source
array because writing to the alias is like modifying a function local
variable. Consider using an array of objects and use v-model on an
object property instead.
Meaning, we need to give v-model access to a direct reference to the synonym and its index:
new Vue({
el: "#app",
data: {
row: {
synonyms: [
"abc",
"def",
"ghj",
]
}
},
methods: {
}
})
body {
font-family: 'Exo 2', sans-serif;
}
#app {
margin: auto;
}
<div id="app">
<h2>Items</h2>
<div class="form-group" v-for="(synonym,i) in row.synonyms">
<input type="text" class="form-control" v-model="row.synonyms[i]" />
</div>
<br>
<h3>
The text below should change if yout type inside the textboxes:
</h3>
<p>
{{ JSON.stringify(row)}}
</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue#2.5.16/dist/vue.js"></script>
The correct way to do it is to use an index, which vue.js provides in loops:
<div class="form-group" v-for="(synonym, index) in row.synonyms">
<input type="text" class="form-control" v-model="row.synonyms[index]" />
</div>
https://jsfiddle.net/m14vd89u/1/
This is the recommended way that Vue.js wants you to do it by using an index (synonym, index):
https://v2.vuejs.org/v2/guide/list.html
<div class="form-group" v-for="(synonym, index) in row.synonyms">
<input type="text" class="form-control" v-on:blur="onItemsChanged(synonym)" v-model="row.synonyms[index]" />
</div>
If you wanted to do it another way you could introduce a method v-on:blur:
new Vue({
el: "#app",
data: {
row: {
synonyms: [
"abc",
"def",
"ghj",
]
}
},
methods: {
onItemsChanged (synonym) {
// do something with array
}
}
})
I'm trying to implement Cancel functionality which should revert back to the previous values in the form, which were present during the last time the form was submitted. I'm trying to create a copy of the data object that's being passed to the form and in the Submit function i'm replacing the new values to the copy and in Cancel function, i'm replacing the copy values to the original values. But i'm not getting the previous values when i call the cancel function.
Working code with errors: http://plnkr.co/edit/SL949g1hQQrnRUr1XXqt?p=preview
I implemented the cancel functionality based on the template driven code of Angualr 2 forms: http://plnkr.co/edit/LCAPYTZElQDjrSgh3xnT?p=preview
Typescript class code:
import { Component, Input, OnInit } from '#angular/core';
import { FormGroup, REACTIVE_FORM_DIRECTIVES } from '#angular/forms';
import { QuestionBase } from './question-base';
import { QuestionControlService } from './question-control.service';
#Component({
selector: 'dynamic-form',
templateUrl: 'app/dynamic-form.component.html',
directives: [REACTIVE_FORM_DIRECTIVES],
providers: [QuestionControlService]
})
export class DynamicFormComponent implements OnInit {
#Input() questions: QuestionBase<any>[] = [];
form: FormGroup;
payLoad:object;
questiont: QuestionBase<any>;
constructor(private qcs: QuestionControlService) { }
ngOnInit() {
this.form = this.qcs.toFormGroup(this.questions);
console.log("Form Init",this.questions);
this.questiont=this.questions;
}
onSubmit() {
this.payLoad = JSON.stringify(this.form.value);
this.payLoad2=this.payLoad;
this.questiont=this.questions;
console.log("Original Data",this.questions);
console.log("Duplicate Data",this.questiont);
}
cancel(){
this.questions=this.questiont;
console.log("Original Data",this.questions);
console.log("Duplicate Data",this.questiont);
console.log("Canceled");
}
}
HTML code:
<div>
<form [formGroup]="form">
<div *ngFor="let question of questions" class="form-row">
<label [attr.for]="question.key">{{question.label}}</label>
<div [ngSwitch]="question.controlType">
<input *ngSwitchCase="'textbox'" [formControlName]="question.key"
[id]="question.key" [type]="question.type" [(ngModel)]="question.value">
<select [id]="question.key" [(ngModel)]="question.value" *ngSwitchCase="'dropdown'" [formControlName]="question.key" >
<option *ngFor="let opt of question.options" [ngValue]="opt.key" >{{opt.value}}</option>
</select>
</div>
<div class="errorMessage" *ngIf="!form.controls[question.key].valid">{{question.label}} is required</div>
</div>
<div class="form-row">
<button type="submit" [disabled]="!form.valid" (click)="onSubmit()">Save</button>
<button type="button" class="btn btn-default" (click)="cancel()">Cancel</button>
</div>
</form>
<div *ngIf="payLoad" class="form-row">
<strong>Saved the following values</strong><br>{{payLoad}}
</div>
</div>
Anyone got this problem or tried to implement this.
Form reset will be implemented in RC5.
Your approach does not work with objects:
this.questiont=this.questions; //you are sharing refrence to the same object
You should clone object instead (there are many ways to do that, i'm using JSON):
this.questiont = JSON.parse(JSON.stringify(this.questions));
Problem Overview
I have a controller with a view model which contains initially an empty array which will be used for storing 'Test Inputs'. I want to provide the user a button to add a new Test Input on the form which adds a new Test Input object to the array and displays the fields needed to edit its properties.
This works when the button is pressed for the first time (but with incorrect binding) but fails to create additional form elements when pressed again.
The Controller with View Model
import {inject} from 'aurelia-framework';
import {HttpClient, json} from 'aurelia-fetch-client';
import {Router} from 'aurelia-router';
import 'fetch';
import toastr from 'toastr';
#inject(HttpClient, Router)
export class create {
constructor(http, router) {
this.vm = {
test: {
id: 0,
description: "",
testOutput: {
id: 0,
valueType: "",
value: ""
},
testInputs: []
}
};
}
}
The user will be able to add a Test Input to the array by pressing a button which delegates to this function:
addTestInput() {
this.vm.test.testInputs.push({
argumentName: "",
valueType: "",
value: ""
});
}
This function pushes to the Test Inputs array in my view model object a new testInput object.
View
In my view I have added a repeat for binding for each object in the TestInputs array. The loop is intending to create the form elements for editing the properties of each Test Input object in the TestInputs array.
<p if.bind="vm.test.testInputs.length === 0">This test has no inputs. Click the button below to add one.</p>
<template if.bind="vm.test.testInputs.length > 0" repeat.for="testInput of vm.test.testInputs">
<div class="form-group">
<label for="testInputArgumentName${$index}">Argument Name</label>
<input value.bind="testInput.argumentName" type="text" class="form-control" id="testInputArgumentName${$index}" placeholder="Argument Name">
</div>
<div class="form-group">
<div class="form-group">
<label for="testInputValueType${$index}">Expected Value Type</label>
<select class="form-control" value.bind="testInput.valueType">
<option repeat.for="valueType of valueTypeList" value.bind="valueType">${valueType}</option>
</select>
</div>
</div>
<div class="form-group">
<label for="testInputValue${$index}">Expected Value</label>
<template if.bind="testInput.valueType === 'Boolean'">
<select class="form-control" value.bind="testInput.valueType">
<option>true</option>
<option>false</option>
</select>
</template>
<template if.bind="testInput.valueType !== 'Boolean'">
<input value.bind="testInput.value" type="text" class="form-control" id="testInputValue${$index}" placeholder="Expected Value">
</template>
</div>
</template>
<button click.delegate="addTestInput()" type="submit" class="btn btn-success">Add Test Input</button> <button type="submit" class="btn btn-success">Create Test</button>
When I first press the Add Test Input button the form elements are added to the page as expected. However if I press the button again the additional from elements for the new object added to the array are not created.
Also the fields seem to be binding to the local loop variable testInput rather than the specific object in the array.
Attempted Solutions
I have had a go using the suggestions at:
Blog Post on Dynamic Forms in Aurelia
Two Way Binding Array in Aurelia
Aurelia Gitter Chat Log - Help
from jsobell
But they don't seem to have worked for me. Anyone have any ideas?
Your problem is simple. You cannot use if and repeat on the same element. Also in your case are redundant with the p on the first line.
Simple do this:
<template repeat.for="testInput of vm.test.testInputs">
...
</template>
You can find more info here