We Keep Coding

Angular change detection on Template Reference Variables for property binding

I'm playing around with template reference variables. And thought of using its value to set the disabled property on a button. i.e disable a button unless the input field is non-empty. I expected the following code to work but the button stays disabled even after some value is entered in the input.
Why does Angular change detection not work in this case?
Is there another way to do achieve this using ONLY template reference variables?
The code is written in Angular 8 and node 12.16.2
<div class="form-group col-md-6">
<input #hello type="text" class="form-control" id="01">
</div>
<div class="form-group col-md-6">
<button class="btn btn-primary" [disabled]="hello.value.length === 0">Deactivate</button>
</div>

You can try ngForm combined with ngModel directive to achieve this,
<form #testForm="ngForm">
<div class="form-group col-md-6">
<input type="text" name="hello" ngModel class="form-control" id="01">
</div>
<div class="form-group col-md-6">
<button class="btn btn-primary" [disabled]="testForm.value.hello.length === 0">
Deactivate
</button>
</div>
</form>
{{testForm.value|json}}
Demo : https://stackblitz.com/edit/angular-ivy-xtdm4k?file=src/app/app.component.html
For more details, see this.

Calling a function onclick in AngularJs

My code has following structure:
main.html - loads all modules - declares ng-app and main controller - contains div tag-load-div
file1.html ... (all other html files) - contain only <div> / child tags and are loaded into a load-div which is in main.html on events such as click
now in one such file say file3.html, I have a checkbox. onclick of that checkbox I want to open a modal window - a form that will be submitted. Now here is my code
file3.html
<div>
<input type="checkbox" name="your-group" value="unit-in-group" onclick="toggleModal();"/>Unit-in-group
<modal title="some title" visible="showModal">
<form role="form">
<div class="form-group">
<label for="email">Email address</label>
<input type="email" class="form-control" id="email" placeholder="Enter email" />
</div>
<div class="form-group">
<label for="password">Password</label>
<input type="password" class="form-control" id="password" placeholder="Password" />
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
</modal>
</div>
now I have written follwing code in the main main controller declared in main.hml
$scope.showModal = false;
$scope.toggleModal = function(){
$scope.showModal = !$scope.showModal;
};
The expected behaviour is when my file3 is loaded I will see a check box on the screen and as I click it, it will open a modal window but instead I see modal form fields on the same page where I see checkbox. and when I click it I get angular exception that showModal is not defined.
Where am I going wrong?

Just need to use Angular syntax: ng-click for the click and ng-show for the visibility.
<input type="checkbox" name="your-group" value="unit-in-group" ng-click="toggleModal();"/>Unit-in-group
<modal title="some title" ng-show="showModal">
Other options:
You could also use ng-change instead of ng-click, which in this case wouldn't make much difference.
Or you could use ng-model (ng-model="showModal") and get rid of your toggle function entirely Example.

I had a similar problem.
To detect a click use Angular syntax: (click)="toggleModal();"
<input type="checkbox" name="your-group" value="unit-in-group" (click)="toggleModal();"/>
I hope this helps.

Another approach would be to use the ngChange directive
to detect that the checkbox got checked
<input type="checkbox" name="your-group" value="unit-in-group" ng-change="toggleModal();"/>
Code for modal remains the same as the other answer suggested
<modal title="some title" ng-show="showModal">

ng-include same partial page twice in a page

I have a partial html file say test.html, I want it to include in main page say main.html twice. I am doing ng-pattern on a text box in my partial file. Its not getting applied to my main page. Please find below example and help me.
test.html (Partial)
<form name="testform">
<div>
<input name="firstname" ng-pattern="/^[a-zA-Z0-9]+$/">
</div>
</form>
main.html
<div>
<div>
<ng-include src="'test.html'"></ng-include>
<button type="button" ng-show="testform.firstname.$error.pattern==false">
</div>
<div>
<ng-include src="'test.html'"></ng-include>
<button type="button" ng-show="testform.firstname.$error.pattern==false">
</div>
</div>
button ng-show is working on only one div, not on both and that too If I use $parent for the partial form name.
Please help me to find what I am missing.

The problem is that you reference same DOM object.
By specyfying name and validating it, you call twice, the same form and same property name. Angular does that once and think that it make done its work.
I think it is not intended to do so, since you can create two forms.
By adding extra class or changing at least form name and wrapping ng-include with form name, you can solve this problem:
test.html
<div>
<input name="firstname" ng-pattern="/^[a-zA-Z0-9]+$/">
</div>
main.html
<div>
<div>
<form name="testform1">
<ng-include src="'test.html'"></ng-include>
</form>
<button type="button" ng-show="testform1.firstname.$error.pattern==false">
</div>
<div>
<form name="testform2">
<ng-include src="'test.html'"></ng-include>
</form>
<button type="button" ng-show="testform2.firstname.$error.pattern==false">
</div>
</div>
Alternatively, you can just create two views with forms and ng-include them accordingly.

Validate a form before it goes to ng-submit in Angular

I have a form which is wrapped like so:
<form ng-submit="processForm()">
...
<div class="btn-group" role="group" ng-hide=0>
<button type="button" value="dog" class="btn btn-default" ng-click="formData.type='dog' ">Dog</button>
<button type="button" value="cat" class="btn btn-default" ng-click="formData.type='cat' ">Cat</button>
</div>
...
So one thing I have to do is run a quick check before submitting the form, to make sure that the person has clicked one of those 2 buttons. I can stick this code inside my processForm code, but I feel like it would be nicer to be able to just do a quick validation inside the html file and leave the processForm to not handle visually displaying this error and whatnot. Is there a way or am I wrong?

I would recommend using radio buttons for that.
Also there is an error variable given by angular.
With mixing these things and html5, you can simply create good validation for this. Without need to submit that to functions.
<form ng-submit="processForm()" name="form">
...
<div class="input-group">
<span class="input-group-addon">
<input type="radio" name="type" ng-model="type" value="dog" required> Dog <br/>
</span>
<span class="input-group-addon">
<input type="radio" name="type" ng-model="type" value="cat" required> Cat <br/>
</span>
</div>
<div ng-show="form.name.$error.required">
Please select one.
</div>
Here is something about it.

js: jasny's upload widget in a flask project

Have a flask project where I'd like to replace a standard file upload form with something a little bit nicer:
<form action="" method=post enctype=multipart/form-data>
<input type=file name=file>
<input type=submit value=Upload>
</form>
Have been looking into using jasny's bootstrap upload widget, but, after loading the correct .js and .css files and incorporating the following HTML
<div class="fileupload fileupload-new" data-provides="fileupload">
<div class="input-append">
<div class="uneditable-input span3">
<i class="icon-file fileupload-exists"></i>
<span class="fileupload-preview"></span>
</div>
<span class="btn btn-file">
<span class="fileupload-new">Select file</span>
<span class="fileupload-exists">Change</span>
<input type="file" />
</span>
Remove
</div>
</div>
I'm not sure how to set up the event to actually upload the file in question. I'm guessing that I hook a different button up to a submit event, but I'm not certain what to do here.

It looks like that plugin works by binding events to existing DOM objects. Did you call
$('.fileupload').fileupload()
after the DOM was ready? If you called it before the element was added to the DOM, it wouldn't find any element to bind events to.