I am working on building a site with Angular 2 and am having some problems with template reference variables. I am creating a pretty straightforward form to add a new listing to an online store:
<div class="row">
<div class="col-sm-6">
<div class="form-group">
<label for="productSKU">Product SKU</label>
<input #productSKU type="text" class="form-control" id="productSKU" placeholder="Enter Product SKU">
</div>
<div class="form-group">
<label for="productTitle">Product Title</label>
<input type="text" class="form-control" id="productTitle" placeholder="Enter Product Title" #productTitle>
</div>
<div class="form-group">
<label for="productSubtitle">Product Subtitle</label>
<input type="text" class="form-control" id="productSubtitle" placeholder="Enter Product Subtitle" #productSubtitle>
</div>
<div class="form-group">
<label for="productPrice">Product Price (USD)</label>
<input type="text" class="form-control" id="productPrice" placeholder="Enter Product Price" #productPrice>
</div>
<div class="form-group">
<label for="productType">Select Product Type</label>
<select multiple class="form-control" id="productType" #productType>
<option *ngFor="let type of listingTypes" [value]="type">{{type}}</option>
</select>
</div>
</div>
<div class="col-sm-6">
<div class="form-group">
<label for="productDescription">Product Description</label>
<textarea class="form-control" id="productDescription" rows="8" #productDescription></textarea>
</div>
<div class="form-group">
<label for="productCondition">Product Condition</label>
<input type="text" class="form-control" id="productCondition" placeholder="Enter Product Condition" #productCondition>
</div>
<div class="form-group">
<label for="storageLocation">Storage Location</label>
<input class="form-control" id="storageLocation" placeholder="Enter Storage Location" #storageLocation>
</div>
<div class="form-group">
<label for="image1Path">Image 1</label>
<input type="text" class="form-control" name="image1Path" id="image1Path" placeholder="Enter Image 1 File Name" #image1Path>
</div>
<button class="btn" id="newPostSubmitButton" (click)="onNewListingSubmit(productTitle.value,
productSubtitle.value,
productType.value,
productPrice.value,
productDescription.value,
productCondition.value,
productSKU.value,
storageLocation.value,
image1Path.value)">Submit</button>
</div>
For some reason when I try to trigger the onNewListingSubmit method in the component on the submit button click, it is giving me the following error:
As you can see, it can't find the property "value" of undefined. It seems to not be recognizing the various template reference variables throughout the form (e.g. #productSKU, #productPrice, etc.)
Any ideas why this might be happening? Can't seem to find any other examples of the same problem. Thanks
Looks like productCondition is not defined on template.
Since you use textarea element. There's no direct property value in textarea. At least its value defined for the collection of elements in textarea.
Related
I'm using Angular version 6.0.7.
I have four <input> fields where the latest three is only required if the first one is provided. I'm trying to make it working by using [attr.required]="<boolean here>" and [required]="<boolean here>", but the required attribute is not removed from the input when the binding value is false.
<div class="col">
<h3 class="mb-3">Ensino superior</h3>
<div class="form-group">
<label for="ad-higher-education-institution">Nome da instituição</label>
<input
[(ngModel)]="client.academic_data.higher_education.institution"
id="ad-higher-education-institution"
name="ad-higher-education-institution"
type="text"
class="form-control">
</div>
<div class="row">
<div class="col form-group">
<label for="ad-higher-education-city">Cidade</label>
<input
[(ngModel)]="client.academic_data.higher_education.city"
[attr.required]="client.academic_data.higher_education.institution && client.academic_data.higher_education.institution.length > 0"
id="ad-higher-education-city"
name="ad-higher-education-city"
type="text"
class="form-control">
</div>
<div class="col form-group">
<label for="ad-higher-education-state">Estado</label>
<input
[(ngModel)]="client.academic_data.higher_education.state"
[attr.required]="client.academic_data.higher_education.institution && client.academic_data.higher_education.institution.length > 0"
id="ad-higher-education-state"
name="ad-higher-education-state"
type="text"
class="form-control">
</div>
</div>
<div class="form-group">
<label for="ad-higher-education-course">Curso</label>
<input
[(ngModel)]="client.academic_data.higher_education.course"
[attr.required]="client.academic_data.higher_education.institution && client.academic_data.higher_education.institution.length > 0"
id="ad-higher-education-course"
name="ad-higher-education-course"
type="text"
class="form-control">
</div>
<div class="form-group">
<label for="ad-high-school-conclusion-year">Ano de conclusão</label>
<input
[(ngModel)]="client.academic_data.higher_education.conclusion_year"
[attr.required]="client.academic_data.higher_education.institution && client.academic_data.higher_education.institution.length > 0"
id="ad-higher-education-conclusion-year"
name="ad-higher-education-conclusion-year"
type="text"
class="form-control"
mask="0*">
</div>
</div>
</div>
How to remove the required attribute when the first input is not filled?
This is the input when the first is filled:
<input
class="form-control ng-valid ng-dirty ng-touched"
id="ad-higher-education-city" name="ad-higher-education-city" type="text" ng-reflect-name="ad-higher-education-city" ng-reflect-model=""
required="true">
And this is the input when the first is NOT filled:
<input
class="form-control ng-valid ng-dirty ng-touched"
id="ad-higher-education-city" name="ad-higher-education-city" type="text" ng-reflect-name="ad-higher-education-city" ng-reflect-model=""
required>
You should just use [required], not [attr.required].
Support for binding directly to required was added in this pull request from a couple years ago.
To solve this problem you just need to use a ternary expression that returns null in the case of false.
[required]="client.academic_data.higher_education.institution ? true : null"
Returning null the required attribute will be excluded from the input.
i just want make some added text next to my input.
im using code igniter, here is my view code.
<div class="form-group" >
<label for="repbbpin" class="col-sm-2 text-left">Tinggi Badan :</label>
<div class="col-sm-5 text-left">
<span ><input type="text" class="form-control" onchange="update_data()" name="tinggi_badan" value="<?=#$registration->tinggi_badan?>" > cm</span>
</div>
</div>
the top code result "cm" is below the input text.
it will be good if just using additional inline code.
the result i want is like this |---input text---|cm
Try using input-addon with input-group
<div class="form-group">
<label for="repbbpin" class="col-sm-2 text-left">Tinggi Badan :</label>
<div class="col-sm-5 text-left">
<div class="input-group">
<input type="text" class="form-control" onchange="update_data()" name="tinggi_badan" placeHolder="input text" ><span class="input-group-addon"> cm</span>
</div>
</div>
</div>
DEMO: https://jsfiddle.net/michaelyuen/crvzn2Lq/
I need to disable the textbox inside my angularJS dynamic form after I clicked the button. my code seems to be working fine if I am going to disable textbox outside the dynamic form but when I get the ID of the textbox inside the dynamic form it is not working. What could be the problem.
$scope.copyText = function () {
document.getElementById('copyText').disabled=true;
document.getElementById('bName').disabled=true;
document.getElementById('pName').disabled=true;
// $('#bName').attr('disabled', true);
//alert('#bName');
$scope.LanguageFormData.language = [
{ bName: document.getElementById('brandName').value, pName: document.getElementById('prodName').value, pNameSub: document.getElementById('prodNameSub').value, lFeature: document.getElementById('pfeatureNew').value, lIngredient: document.getElementById('pingredientNew').value, lInstruction: document.getElementById('pinstructionNew').value, languageCat: null }
];
My View looks like this
<div class="col-md-12" class="pull-right" >
<button class="btn btn-primary pull-right" type="button" ng-click="copyText()" id="copyText" value="">COPY</button>
</div>
</div>
<div id="web" ng-repeat="languageItem in LanguageFormData.language">
<div class="row col-xs-12">
<div class="col-xs-6">
<br/><br/>
<div class="form-group">
<label class="col-md-6 control-label">Brand Name: </label>
<div class="col-md-6">
<input type="text" class="form-control" ng-required="true" name="bName" id="bName" class="form-control" ng-model="languageItem.bName" required/>
</div>
</div><br/><br/><br/>
<div class="form-group">
<label class="col-md-6 control-label">Product Name: </label>
<div class="col-md-6">
<input type="text" class="form-control" name="pName" ng-required="true" id="pName" ng-model="languageItem.pName" required/>
</div>
</div><br/><br/><br/>
Why not use ng-disabled. You need to change $scope.disableThis=false; back to false to re-enable the text somewhere else inside the controller code.
$scope.copyText = function () {
$scope.disableThis=true;
$scope.LanguageFormData.language = [
{ bName: document.getElementById('brandName').value, pName: document.getElementById('prodName').value, pNameSub: document.getElementById('prodNameSub').value, lFeature: document.getElementById('pfeatureNew').value, lIngredient: document.getElementById('pingredientNew').value, lInstruction: document.getElementById('pinstructionNew').value, languageCat: null }
];
Suggestions:
I have some doubts on the above code, you can just use the $scope.LanguageFormData.language as is, since you are using ng-model in the input fields, the data of the variable is updated dynamically, you can check this by {{LanguageFormData.language}} printing the output in the HTML
HTML:
<div class="col-md-12" class="pull-right" >
<button class="btn btn-primary pull-right" type="button" ng-click="copyText()" id="copyText" ng-disabled="disableThis" value="">COPY</button>
</div>
</div>
<div id="web" ng-repeat="languageItem in LanguageFormData.language">
<div class="row col-xs-12">
<div class="col-xs-6">
<br/><br/>
<div class="form-group">
<label class="col-md-6 control-label">Brand Name: </label>
<div class="col-md-6">
<input type="text" class="form-control" ng-required="true" name="bName" id="bName" ng-disabled="disableThis" class="form-control" ng-model="languageItem.bName" required/>
</div>
</div><br/><br/><br/>
<div class="form-group">
<label class="col-md-6 control-label">Product Name: </label>
<div class="col-md-6">
<input type="text" class="form-control" name="pName" ng-required="true" id="pName" ng-model="languageItem.pName" ng-disabled="disableThis" required/>
</div>
</div><br/><br/><br/>
Suggestions:
It would be good if you restrict the ID for one particular element alone, its a good practice to follow in general!
I have this code:
<div class="col-md-12">
<div class="form-panel">
<h4><i class="fa fa-angle-right"></i> Testing </h4>
<hr />
<form method="post" name="ibisaserver">
<div class="form-group">
<label class="col-sm-3 col-sm-3 control-label">Address:</label>
<div class="col-sm-9">
<input type="text" class="form-control" name="interfaces" value="" required>
</div>
</div>
<div class="form-group ">
<label class="col-sm-3 col-sm-3 control-label">Network: </label>
<div class="col-sm-9">
<input type="text" class="form-control" name="direccionIp" value="" required>
</div>
</div>
<div class="form-group">
<label class="col-sm-3 col-sm-3 control-label">Netmask : </label>
<div class="col-sm-9">
<input type="text" class="form-control" name="mascaraSub" value="" required>
</div>
</div>
<div class="form-group">
<label class="col-sm-3 col-sm-3 control-label">Broadcast : </label>
<div class="col-sm-9">
<input type="text" class="form-control" name="direccionGat" value="" required>
</div>
</div>
As you can see I have 4 inputs tag..
And I have this code as well:
with open("/etc/network/interfaces", "r") as file:
content = file.read()
print content
Where I'm getting the information I need from the following path : "/etc/network/interfaces".
Something like this:
Now, My question is: Is there a way to show the data I'm getting from my python or my local machine ("etc/network/interfaces") to my input tags?
There are two ways which you can use:
Make the python file generate the output html file, which you can use. HTML.py is a good option to start with it.
You can use XmlHttpRequest to read local files using javascript and populate the data automatically using JQuery.
I have the following code and it works fine to check if the input field "inputURL" has a valid URL, if it has the anchor link a.btn shows fine but I also only want it to show if both have been filled in. How can I add to the ng-show in the anchor to do this?
<form name="myForm" class="row inputs">
<div class="col-xs-5">
<label for="exampleInputPassword1">Enter a Title/Description</label>
<input type="text" id="urlName" class="form-control" placeholder="" ng-model="mvName" >
</div>
<div class="col-xs-5">
<label for="exampleInputPassword1">Enter a URL</label>
<input type="url" name="inputURL" id="urlLink" class="form-control" placeholder="" ng-model="mvUrl" >
</div>
<div class="col-xs-2">
Post
</div>
</form>
You can check if both have been filled with the model like this:
ng-show="myForm.inputURL.$valid && mvName && nvUrl"
or with the view value of the input
ng-show="myForm.inputURL.$valid && myForm.inputURL.$viewValue && myForm.urlName.$viewValue"
You can use the required HTML5 special attribute to check if the input is not empy.
<form name="myForm" class="row inputs">
<div class="col-xs-5">
<label for="exampleInputPassword1">Enter a Title/Description</label>
<input type="text" name="mvName id="urlName" class="form-control" placeholder="" ng-model="mvName" required>
</div>
<div class="col-xs-5">
<label for="exampleInputPassword1">Enter a URL</label>
<input type="url" name="inputURL" id="urlLink" class="form-control" placeholder="" ng-model="mvUrl" required>
</div>
<div class="col-xs-2">
Post
</div>
</form>
However, to clean the view a little bit, I would suggest using a controller. Expose a function which returns true or false if the form is valid. And simply use ng-show="isValid()".