I am dynamically clearing the errors of my reactive form like:
this.courseForm.setErrors(null);
But the errors are still displayed in my template:
<form [formGroup]="courseForm" autocomplete="off">
<div class="alert-group" *ngIf="submitted && formGroup.errors?.coursedates">
<div *ngFor="let err of formGroup.errors?.coursedates?.value" role="alert" class="error">
{{err}}
</div>
</div>
</form>
Is there a way to clear formgroup errors in template as well?
thanks
Errors for each control doesn't populate for formgroup errors. So clearing formgroup errors doesn't remove the errors from each of its form-controls.
We need to setErrors(null) for each control inside formgroup. Here is how we do it.
Object.keys(this.courseForm.controls).forEach(key => {
this.form.get(key).setErrors(null);
});
Make sure to mark it as answer if the solution fixes your issue.
Related
I have been using mdTooltip and was running into issues so I am in the process of using MatTooltip in my project. When I run my app tho, I keep getting the following error
core.js:1449 ERROR Error: Uncaught (in promise): Error: Template parse errors:
Can't bind to 'mdTooltip' since it isn't a known property of 'input'. ("ass="form-control" (blur)="submitAnswer(item.$key, updatedata.value)"
[ERROR ->][mdTooltip]="item.desc"
mdTooltipPosition="right">
"): ng:///OwnershipCostModule/OwnershipAdminComponent.html#133:29
but when I go to where it tells me to I have the following
<div class="row">
<div class="col-12">
<div class="input-prepend input-group">
<span class="input-group-addon">$</span>
<input type="number" #updatedata [placeholder]="item.amount" [value]="item.amount" id="default" name="default" class="form-control" (blur)="submitAnswer(item.$key, updatedata.value)">
</div>
</div>
</div> -- line 133
I'm not sure why I'm getting the error as I replaced all instances of mdTooltip in my project.
Edit: This is what the submitAnswer function looks like
submitAnswer(key: string, answer: number) {
if (answer) {
this.answerdata.update(key, { amount: answer });
}
}
answerdata is a FirebaselistObservable
I realized that I was looking at the wrong component, and was able to get rid of the template parse error.
Feels like a dumb question but I do not get it. How can I do fast string concatenation in Angular 2 Dart templates?
I have a seperate html file for my component lets say my_component.html:
Works:
....
<div id="abc">
{{order.pickupPlace.email}}
</div>
...
Works:
....
<div id="abc">
{{ ((order.pickupPlace.state) ? order.pickupPlace.state+" ":'')}}
</div>
...
Does not work:
....
<div id="abc">
{{"<br/>"+order.pickupPlace.email}}
</div>
...
Does not work:
....
<div id="abc">
{{order.pickupPlace.name+" "+order.pickupPlace.email}}
</div>
...
Have tried to find an answer in the docs here (https://webdev.dartlang.org/angular/guide/template-syntax#!#expression-operators) but no luck.
Of course I could use *ngIf on every element which I output conditionally but is there a way for simple string concatenation?
The best way is to declare a getter inside your Component controller that does the concatenation for you, you will get dart syntax support and the html template will looks cleaner.
String get myConcatenation => "${order.pickupPlace.name}${order.pickupPlace.email}";
<div id="abc">
{{myConcatenation}}
</div>
The last two examples can be made to work easily:
<div id="abc">
<br/>{{order.pickupPlace.email}}
</div>
And:
<div id="abc">
{{order.pickupPlace.name}} {{order.pickupPlace.email}}
</div>
Angular handles this pretty well. If you need some more complicated logic you can move it to the Dart code (but you cannot use HTML there easily).
If you find creating lot of weird logic consider creating more smaller components that can handle this for you.
I have the following form with some simple validation rules:
<form name="signup_form" novalidate ng-submit="ctrl.signupForm()">
<div class="row">
<input placeholder="Username"
name="username"
ng-model="ctrl.username"
required
ng-minLength=3
ng-maxLength=8>
</div>
<div ng-show="signup_form['username'].dirty &&
signup_form['username'].invalid">
<!-- ... -->
</div>
<button type="submit">Submit</button>
</form>
I would like to display specific error messages for required, ng-minLength and ng-maxLength, but I'm not having success being able to drill down into signup_form['username'].errors to get the specific error.
I can access the errors map just fine in the controller, it is in the markup that I cannot get a handle on the specific error. I would like to be able to do roughly something like this:
<div ng-show="signup_form['username'].errors['minlength'].invalid>
<!-- ... -->
</div>
I.e., something like the following in angularJS:
<div ng-show="signup_form.username.$error.required">This field is required</div>
A working example for
Inspired by this filter I tried this approach again
Angular 0.9.9
#NgFilter(name: 'errors')
class ErrorFilter {
call(val) {
if(val != null) {
return val.map.keys;
}
return null;
}
}
and in the markup
{{signup_form['username'].errors | errors}}
EDIT for Angular 0.9.10
#NgFilter(name: 'errors')
class ErrorFilter {
call(val) {
if(val != null) {
return val.keys;
}
return null;
}
}
and in the markup
{{signup_form['username'].errorStates | errors}}
I learned from the discussions I have observed in the AngularDart Github repo that better solutions are on their way.
related open issue
When this https://github.com/angular/angular.dart/pull/771 is landed
hopefully better solutions are possible.
I have the following code:
{#data.merchantModel}
<div class="address">
{#content $key="content:combinedAddr" merchantAddress1="{merchantAddress1}" merchantAddress2="{merchantAddress2}"/}
</div>
{:else}
<div class="address">{merchantAddress1}</div>
more code...
{/data.merchantModle}
I'm working with Webcore/NodeApp but everything after the {:else} doesn't get rendered. If I comment it out everything is fine. Not sure why webcore doesn't like the {:else} but was wondering if there's another way to write the above code?
Still trying to wrap my head around dust.
Looks like you need to close your content tag and model is misspelled on the closing tag:
{#data.merchantModel}
<div class="address">
{#content $key="content:combinedAddr" merchantAddress1="{merchantAddress1}" merchantAddress2="{merchantAddress2}"/}
</div>
{:else}
<div class="address">{merchantAddress1}</div>
more code...
{/content}
{/data.merchantModel}
<div class="sortable-sections">
<fieldset class="section draggable" id="flSectionType">
<div class="btn-drag section-handle hidden-view">
</div>
<div class="section-header">
<span class="section-label">Job Requirements</span> <a class="section-info" href="#more-info"
title="Minimum Education, Minimum Work Experience, Required Licenses/Certifications, Required Skills, Knowledge, and Abilities needed to perform the job.">
?</a>
</div>
<div class="sortable-items">
</div>
<a class="section-add-item hidden-view" id="addJR" href="#add-item" data-item='{"id":"addJR","template":"requirement","item_type":"Job Requirement"}'>
Add a new Job Requirement</a>
</fieldset>
<fieldset class="section draggable">
</fieldset>
<fieldset class="section draggable">
</fieldset>
<div>
The above code will generate a list of sections which can be dragged with in the sortable-sectons.
I am using the following script to remove sections manually and adding it back to sortable-sections, but it is not registering the jquery events.
var $section = $('.sortable-sections').find($('#flSectionType');
$('.sortable-sections').find($('#flSectionType').remove();
......
.......
$('.sortable-sections').append($section.val());
After appending the section, the event which are registered for the section-add-item css classes are not triggering.
Note:
instead of "on" used the "live" method. but it is not holding all attributes.
Edit:
Event code:
$('.section-add-item').on('click', function (e) {
that.addSection(this);
e.preventDefault();
});
instead of drag and drop, manually i am ordering the section on initial load.
.section-add-item must already exist when adding the event and the usage of on is wrong
$('body').on('click', '.section-add-item', function (e) {
});
instead of the body you can add another parent of .section-add-item that already exists before .section-add-item is created.