I have created a Form called compaign! My purpse is to register Form's inputs data within a FormGroup Object and send it to my backend ! The first thing I have done it ; is that I created a FormGroup model i used the class CompaignForms , then i had to instanciate this class using a local variable called compaignexample ; After that i have created the main FormGroup object called compaignform and i had to initialize it with compaignexample attributes using get method ! But the problem is in my template becauz i
worked with formControl and ngModel at the beginning ! So i was urged to delete the directive[(ngModel)] and i kept onlyformControlName! However , the console displays that i have to make a parent component ( [formGroup] ) ! I tried it in vain !! Please how can i fix that problem !
I mentionned my stackblitz demo and it doesnt contain the whole project !! there is a path problem there ! but the only problem which figure out currently is the one above !!
enter link description here
remove this code #compaignForm="ngForm" from your form tag and add this [formGroup]="compaignexample" to your form tag.
<form [formGroup]="compaignexample" (ngSubmit)="saveCompaign()"></form>
ngForm is used when creating Template-driven forms.
Related
If I can use condition based required field validation:
([required]="test.test1")
getting text area is red color underline and I can try some solution code but not worked
ex: (this.formGroup?.setErrors(null);
this.formValidate.valid;
this.formValidate.untouched;) ```
And I have attached image link below
In a template driven form you use <form #f="ngForm".
So you need get the form with ViewChild and use the property form of the NgForm to mark as untouched
I Imagine (I don't check) some similar
#ViewChild('f') myForm:NgForm
//in any where
this.myForm.form.markAsUntouched()
Remember that a mat-error by defect only show if is touched
I was following the tutorial Tour of Heroes. While adding a new hero they say
You can use an element paired with an add button.
Insert the following into the HeroesComponent template, after the heading:
<div>
<label for="new-hero">Hero name: </label>
<input id="new-hero" #heroName />
<!-- (click) passes input value to add() and then clears the input -->
<button type="button" class="add-button" (click)="add(heroName.value); heroName.value=''">
Add hero
</button>
</div>
Here I don't understand what is #heroName inside in input element (what is it called) and how does it help in pairing that input element with the button element.
Basically, what is that #<keyword> syntax within that input element. I know that it is not the id as that is already declared.
To answer the question, it's a reference to the input. You can find more details here:
https://angular.io/guide/template-reference-variables
Template variables help you use data from one part of a template in
another part of the template. Use template variables to perform tasks
such as respond to user input or finely tune your application's forms.
In the tutorial context, it's a reference to the input element. It helps to pair it with a button to be able to access it's value, without having to actually define a variable in the component.ts and trying to update the template directly. This help you "skip" a step, and actually have direct access to that value.
Template reference variables can become very handy in certain cases and are commonly used for example in angular material ( to call a function for a component )
<mat-menu #menuComponent ...></mat-menu>
<button (click)="menuComponent.close()"></button>
In the above example, you bind the menuComponent variable to "mat-menu" component, in which case you can access all the variables, public methods of such. In that case we can call "close" method from the mat-menu component.
Let me know if this is still unclear and I can try to give you more examples and explanation
I am new to Angular and have run into a problem that seems to have a javascript work around but they aren't very elegant.
I have a model with an array property. I ngfor the list property to build some html selection options. This is all working nicely. The problem comes when I am trying to set default value...the html elements don't have a load event.
I tried numerous html elements and they don't appear to have a load event either but I certainly could be doing it wrong.
I have seen a solution to put javascript tag right after the html and I could do that but I was really looking for a more elegant way in Angular.
I saw this SO post and thought that was my answer but there is a warning given that I agree with and thus it doesn't appear to be a good solution.
Regardless I tried it just to see if it would work and I got:
Failed to execute 'setAttribute' on 'Element': '{{loadDefaults()}}' is not a valid attribute name
<span {{loadDefaults()}} ></span>
So how can I fire an AS2 function in the component to load the default values?
HTML (btw this is NOT a full page load so there is no body tag):
<tr>
<td *ngFor="let loc of locOptions;">
<span>{{loc.text}}</span>
<input type="radio" name="radiogroup" [value]="loc.value" (change)="onSelectionChange(loc.value)">
</td>
</tr>
Edit
I thought perhaps mistakenly that ngoninit would fire too soon...before the html elements are rendered.
So perhaps what is being suggested is that I add a boolean is default to the model and bind THAT as the element is rendered.
In your ngonit function set this.locOptions to your default values. The value can be changed later on in any function and the change will be reflected in the view. Hope this helps you.
You should use ngOnInit to init you data, and call retrieve your data from your component :
defaults : any;
ngOnInit {
this.defaults = loadDefaults();
}
loadDefaults() {
//get data
}
HTML :
<span>{{defaults}}</span>
I have a input field which I set focus to when my view loads in the following way:
ngAfterViewInit() {
this.focusInput.nativeElement.focus();
}
this works fine from within the ngAfterViewInit() function but when I try to do it in another part of my view when a button is clicked I get an exception saying that focusInput is undefined. After reading up a bit it seems like ngIf could be the cause of this as the part of the view that contains the input field #focusInput gets shown or hidden using ngIf. Is there any way I can check using ngOnChanges() or anything else whether the #focusInput input field is currently shown and if it is set focus to it?
It happens when you have ngIf or ngFor directives inside your template and your input can not be linked to focusInput property you added inside your class. Instead use this code:
<input type="text" #myInput />
{{ myInput.focus() }}
Just add {{ myInput.focus() }} right after input inside template
The simplest solution turned out to be writing a custom focus attribute directive. This helped a lot:
How to move focus on form elements the Angular way
I know its very late to answer your question. If you want focus after any click or view change so for this you need to call change detector.
You can call change detection after your view change or a click by calling detectchanges().
`constructor(private detRef:ChangeDetectorRef) {}
#ViewChild('name_input') input: ElementRef;
private buttonClick(): void {
this.detRef.detectChanges();
this.input.nativeElement.focus();
}`
Hope this will helpful.
Hie folks..... When I click on submit button of the CUSTOM REGISTRATION form..... it redirects to the same page...... ?? No idea what this is about......
Controller: default.py
def register():
form=auth.register()
form.add_button('Cancel', URL('register'))
return dict(form=form)
View: register.html
Please take the little pain to open this link to view the html file.... I am unable to post the exact html code in here... problem with syntax..
http://pastebin.com/bPQu2DX3
print form.errors -> Storage {}
print form.accepts(request.vars,session) -> false
You have duplicated line form=auth.register()
You return dict(late=late, form=form) but late is never used in your controller...
I think you should simplify your controller :
def register():
form=auth.register()
form.add_button('Cancel', URL('register'))
return dict(form=form)
First, your first two lines are useless, as the third line simply overwrites the "form" variable with a completely new object. Second, auth.register() already handles the form processing, so you cannot subsequently call form.accepts(). If you want to control the flash messages, use the auth.messages object to set them.
Thanx folks .. Finally got the answer....
I was not putting all the fields in custom form..
the fields that one doesn't require and is validated as not null also needs to be mentioned in custom form as hidden attributes otherwise whole of the form won't get accepted.