I just started working on an Angular project.
In the following code, I would like to use ngFor and ngModel to iterate an array and put the item value as a default value for the text area. And I have an example with two values in the array, all the textareas are always get overwritten by one of them instead of showing the different values on the website. Does anyone know what could be possible reason for that?
<mat-form-field *ngFor = "let item of model.answers; let index = index;" class="example-full-width" appearance="fill">
<mat-label>Cluster Answer</mat-label>
<textarea
matInput
id="{{item['id']}}"
rows="7"
placeholder="Cluster answer"
[(ngModel)]="model.answers[index]['answer']"
name="clusterAnswer"
formControlName="clusterAnswer"
></textarea>
<mat-hint>Define the cluster answer to be suggested</mat-hint>
</mat-form-field>
you must define the value in the form builder in the ts non in the html:
exampe.formBuilder{
test:[defaultValue]
}
you already have ngModel so no need to specify formControlName, use of [(ngModel)] with formControlName has been deprecated
<mat-form-field *ngFor = "let item of model.answers; let index = index;" class="example-full-width" appearance="fill">
<mat-label>Cluster Answer</mat-label>
<textarea
matInput
[id]="item['id']"
rows="7"
placeholder="Cluster answer"
[(ngModel)]="model.answer"
></textarea>
<mat-hint>Define the cluster answer to be suggested</mat-hint>
</mat-form-field>
You need to provide different name attribute value for each individual iteration because the ngModel value uses the value of the name attribute to connect the new control with the provided name to the form.
In your case it's not even necessary to use two way data binding (the bananna in a box [(ngModel)]) because you already have the state of the form inside the form itself so you can just use the [ngModel] to bind the value if there is one and whenever you want to get the new values you can either use #ViewChild(NgForm) form: NgFrom in order to get the form from your view (probably its going to be better to query it using a template variable name. It will look something like <form #f="ngForm"> where f is your template variable. Also check out the View Child Decorator) or inside the ngSubmit event of your form you can provide the value of the form using a template variable. <form #f="ngForm" (ngSubmit)="submitHandler(f.value)">.
I don't recommend using the two way data binding because what happens is that we store the same values at two different locations:
the state of each individual ngModel control that we have
inside the state your component.
Also formControlName directive comes from the Reactive-Forms and it's not good to mix both types of forms inside a single form.
<mat-form-field *ngFor="let item of model.answers; let i = index;" class="example-full-width" appearance="fill">
<mat-label>Cluster Answer</mat-label>
<textarea
matInput
[id]="item['id']"
rows="7"
placeholder="Cluster answer"
[ngModel]="model?.answers?[i]?['answer']"
[name]="'clusterAnswer' + i"
></textarea>
<mat-hint>Define the cluster answer to be suggested</mat-hint>
</mat-form-field>
Related
I want to show error message like required error message for max input limit but using below code it work for required but not for maxlength . I also not to use ts file . Is there any way to achieve this. Thanks
<form #featureForm="ngForm">
<mat-form-field class="featureInputForm" appearance="fill">
<mat-label>Feature Namre</mat-label>
<input matInput [(ngModel)]="featureName" required name="featureName" maxlength="64" (ngModelChange)="moduleNameChange($event)" />
<mat-error *ngIf="featureForm.controls['featureName']?.errors?.required">Feature Name is required.</mat-error>
<mat-error *ngIf="featureForm.controls['featureName']?.errors?.maxlength">Maximum limit exceed.</mat-error>
</mat-form-field>
</form>
According to documentation for HTML attribute: maxlength, the browser will generally prevent the user from entering more text than the maxlength attribute allows. This explains why you don't see the error message when typing into the input.
However, if the value is longer than the maxlength on the .ts side of things, then the code you have will render the error text. For instance assuming maxlength=10 and if featureName = '12345678901' <- string is longer than maxlength so error message would render on the page.
See this stackblitz for an example.
There are two approaches to this.
1. Use reactive forms approach
2. Use template forms approach
As per your requirement, you don't want to use the .ts file for validation.
Then you can proceed with template-driven forms in angular rather than proceeding with the reactive forms-driven approach. Reactive Forms driven approach mainly deals with forms of validation-related logic in the .ts file itself. While in the template-driven approach it does handle the logics in the template itself.
For further reading on reactive-forms in angular
For further reading on template-forms in angular
Please refer to the code block below :
<form #featureForm="ngForm">
<mat-form-field class="featureInputForm" appearance="fill">
<input matInput name="featureName" [ngModel]="featureName" maxlength="10" #featureName="ngModel" required>
<div *ngIf="featureName.errors" [ngClass] = "'error'">
<div *ngIf="featureName.errors.maxlength">
Name must be at least 10 characters long.
</div>
<div *ngIf="featureName.errors.required">
featureName is required.
</div>
</div>
</mat-form-field>
</form>
I want to add search functionality in my mat multiple select dropdown.
I have done this thing in Jquery but I want to do same thing in Angular material.
Here is the design pic.
Here is the image
Try this example in stackblitz
stackblitz example with angular 8
in your html file
<h2>Multiple selection</h2>
<p>
<mat-form-field>
<mat-select [formControl]="bankMultiCtrl" placeholder="Banks" [multiple]="true">
<mat-select-search [formControl]="bankMultiFilterCtrl"></mat-select-search>
<mat-option *ngFor="let bank of filteredBanksMulti | async" [value]="bank">
{{bank.name}}
</mat-option>
</mat-select>
</mat-form-field>
</p>
<p>
Selected Banks:
</p>
<ul *ngFor="let bank of bankMultiCtrl?.value">
<li>{{bank.name}}</li>
</ul>
The problem is that the material select doesn't have the functionality for an input. Therefore you need to do a bit of css to make it look good.
<mat-select multiple>
<mat-form-field>
<input matInput placeholer="Search" (input)="filterOptione($event.target.value)" />
</mat-form-field>
<mat-option *ngFor="let option of options" [value]="option">
{{option}}
</mat-option>
</mat-select>
The filter function:
public filterOptions(filter: string): void {
this.options = this._unfilteredOptions.filter(x => x.toLowerCase().includes(filter.toLowerCase()));
}
Instead of using a mat-select, use a mat-autocomplete. https://material.angular.io/components/autocomplete/overview
You can make it work the same as a mat-select by populating it with all values when the input is blank, then filter the auto-complete options when the input value changes.
Again, the trick is to make it show all available options when the input is empty.
Hope this helps.
Edit:
I should add that I use a mat-chip-list (https://material.angular.io/components/chips/overview) for the multi-select part of the equation. When an option is selected, add it to the chip list, and you can add X icons to each chip to remove things from the list.
Granted, this is my personal flavor of a multi-select input, but I thought it might give you some ideas.
My approach for this solution is as follow:
I populated mat-option from an array of object with many parameters. Of course, I used only one or 2 parameters to show, but I want my user to search by any value of the object even the values of the parameters that are not shown in the mat-option, So, in the template I created an input field like the follow
<mat-form-field>
<mat-select multiple>
<input matInput placeholer="Search" (input)="search($event)" />
<mat-option *ngFor="let d of data" [value]="d">
{{d}}
</mat-option>
</mat-select>
</mat-form-field>
And in the .ts file:
AllData:any[]; //of course the type will be the type of your data.
Search(event: any, PropertyToSearch: string)
{
this.data = this.AllData.filter(x =>
{
for (let v of String(event.target.value).trim().split(" "))
{
if (Object.values(x).join(" ").toLowerCase().includes(v.toLowerCase()))
return true;
}
return false;
});
}
In this function, I creates an array of the words entered by the user, and joined all the values of the each object inside the data array and search each word inside that joined string. Why did I do that? Because there is a case when the user by mistake add 2 spaces between 2 words like this "word1 word2".
If I used simple solution like
this.AllData.filter(x => x.toLowerCase().includes(event.target.value.toLowerCase()));
and the user write the words with only one space between the words, the matched result will not shown. Also, my solution make the user use any value he remember to search with.
I want to validate the inputs from a form in vuejs, and when the data is pre-populated I want the inputs to convert to readonly.
<input type="number" name="cf_962" class="form-control" v-model="fillProfile.cf_962" step="0.1" :readonly="(fillProfile.cf_962>0.00) ? true : false">
the problem with this now is that always that i writed on the input if the value is higher than 0 the input is readonly and i dont want that.. how can do that with vuejs 2?.. thank you.
What you are trying achieve can be done easily using v-once directive
<input type="number" name="cf_962" class="form-control" v-model="fillProfile.cf_962" step="0.1" :readonly="(fillProfile.cf_962>0.00) ? true : false" v-once>
As mentioned in docs
You can also perform one-time interpolations that do not update on
data change by using the v-once directive, but keep in mind this will
also affect any other bindings on the same node
v-once will let you set readonly for the inputs having pre populated data, and not readonly for the inputs which are not pre populated. This thing will happen only once so next time you write on the input it will won't affect the readonly anymore.
I have a directive with the following template
<div>
<span class="label">My Label</span>
<input ng-model="name" required>
</div>
I want the label to be painted red when the input field is invalid.
How can I do that?
Currently I have another directive to sync all the errors from ngModelCtrl to the wrapping div
<div add-all-errors>
...
</div>
And the directive's link function does something like this:
const ngmodel = $element.find('[ng-model]').controller('ngModel');
$scope.$watch(()=>ngmodel.$error, addAllClasses, true);
Where addAllClasses simply makes sure the correct classes appear on the element..
I also tried just adding the same ng-model
<div ng-model="name">
...
</div>
But did not see the classes there..
any better way to do this?
This is why we use the angularjs form... I'm really not sure why people are against using a very handy feature.
I've made a plunker for you.
https://plnkr.co/edit/bGOcQjWzlRq2aTYZUYNm?p=preview
<form name="form">
<span ng-class="{red: form.name.$invalid}">Name:</span>
<input name="name" ng-model="name" required>
</form>
A little more insight of what's going on. form is added to the scope auto magically by angularjs by it's name. In this case, I named it form, however it can be any name.
Now form is an ngForm Object and adds all input field into it by their name attributes. This way we can do form.name to get another object similar to the ngForm Object. We can then use $invalid or $valid properties with ng-class.
ngForm is pretty powerful and is loaded with many cool properties and methods. Just call console.log(scope.form); You will need to put in a method and add it to ng-change to see updates.
I have a vue component that shows a form populated with items from a selected item to edit. Now I don't want to have to use a second form for creating a new item. At the moment I auto populate and update the item with v-model which obviously updates the object. Am I not able to use conditional operators in this like so?
<form #submit.prevent>
<div class="field">
<label class="label">Job Title</label>
<p class="control">
<input type="text" class="input" placeholder="Job title" v-model="experiences[editIndex].title ? experiences[editIndex].title : ''" />
</p>
</div>
</form>
You can use conditional operators with v-model, but you can't give v-model a string like you're attempting in your example.
I wouldn't use the same form for editing and creating (might be preference). I would make the form its own component and then make two additional form components for editing and creating.
However, if you really want to handle the logic in each input's v-model directive, you would need to give it a variable in the last part of the ternary operator. Something like this:
v-model="experiences[i].title ? experiences[i].title : newExperience.title"
If you use eslint-plugin-vue it will complain about ternary in v-model.
ESLint: 'v-model' directives require the attribute value which is
valid as LHS. (vue/valid-v-model)
So I'd rather explicitly use a pair of :value and #input props.
Like that:
<input
type="text"
class="input"
placeholder="Job title"
:value="experiences[editIndex].title ? experiences[editIndex].title : ''"
#input="experiences[editIndex].title = $event.target.value"
/>
Also, you can use some function for #input, which will check property existence and add it if necessary.