<h3 class="pulse-green-text"><span class="icon ico_pulse_download"></span>VPN Certificate</h3>
<div class="vpn-cert" ng-controller="vpnController vpnCert">
<form method="post" name="userform" class="form-horizontal" id="user" ng-submit="save(userform)" novalidate>
<div class="container-fluid">
<div class="form-group" ng-disabled="true">
<div class="row">
<label class="col-sm-6 control-label">Download</label>
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 pull-left">
<label class="control-label">Click the link to download </label>
certificate
</div>
</div>
<div class="row">
<label class="col-sm-6 control-label">Renew</label>
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 pull-left">
<div class="form-group has-feedback">
<label class="col-sm-2 control-label">Renew the certificate</label>
</div>
<button type="button" class="btn btn-primary btn-default btn-xs" ng-click="vpnCert.renew();">
RENEW
</button>
</div>
</div>
</div>
</div>
</form>
</div>
Any idea how to make it work?
ng-disabled will only work on specific elements like button, input, select etc.
You can read more about ng-disabled in the angular docs https://docs.angularjs.org/api/ng/directive/ngDisabled
Please provide more information to your question to get a better answer
Related
Hello I'm trying to submit data as per type. There 2 types 1.Answer 2.Sub Flow. But my save button not enabled when I'm selecting sub flow. Please help me What I'm missing there.
BELOW IS THE HTML FILE CODE
<div class="row">
<div class="box">
<app-question-error *ngIf="isError" [errorData]='errorData'></app-question-error>
<form *ngIf="!isError" [formGroup]="questionForm" (ngSubmit)="SubmitForm()">
<div class="col-12 col-md-8 col-sm-12">
<div>
<div class="form-group row">
<label for="colFormLabel" class="col-sm-3 col-form-label">Type </label>
<div class="col-sm-4 d-flex justify-content-between">
<select formControlName="subflow" class="form-control" (change)="onDropDownChange($event)">
<option>Answer</option>
<option>Subflow</option>
</select>
</div>
</div>
</div>
</div>
<div class="col-12 col-md-12 col-sm-12">
<div class="form-group row">
<div class="col-sm-2">
</div>
<div class="col-sm-10">
<div *ngIf="subflowSelection == 'Subflow'">
<ul class="list-group">
<ng-select [items]="flowNames" bindLabel="flowName" appendTo="body" multiple="true"
formControlName="subflow">
</ng-select>
</ul>
</div>
</div>
</div>
</div>
<ng-container *ngIf="subflowSelection === 'Answer'">
<div class="col-12 col-md-8 col-sm-12" formArrayName="answers">
<div *ngFor="let quantity of getAnswers().controls; let i=index" [formGroupName]="i">
<div class="form-group row">
<label for="colFormLabel" class="col-sm-3 col-form-label">{{mylabels.answer}} </label>
<div class="col-sm-9 d-flex justify-content-between">
<input type="text" class="form-control w-90" formControlName="answerText">
<span class="mr-2"></span>
<button (click)="removeAnswers(i)">
<i class="fa fa-minus" aria-hidden="true"></i>
</button>
</div>
</div>
</div>
<div class="col-sm-9 has-error" *ngIf="f.answers.touched && !f.answers.valid">
{{mylabels.answerRequired}}
</div>
<div>
</div>
</div>
<div class="col-12 col-md-8 col-sm-12">
<div class="form-group row">
<label for="colFormLabel" class="col-sm-3 col-form-label"> </label>
<div class="col-sm-9">
<div class="add-more-answers ">
<button type="button" (click)="addAnswers()"
class="col-12 col-md-5 col-sm-12 btn btn-blue">{{mylabels.add_more_ans}}</button>
</div>
</div>
</div>
</div>
</ng-container>
<div class="container">
<div class="col-md-12">
<div class="row d-flex justify-content-end">
<button [routerLink]="['/question-list']" type="button"
class="btn btn-gray btn-sm mr-4">{{mylabels.cancel}}</button>
<button type="submit" [disabled]="!questionForm.valid"
class="btn btn-red btn-sm ">{{mylabels.save}}</button>
</div>
</div>
</div>
</form>
Below is TS file code Where I'm creating form controls.
this.questionForm = this.fb.group({
questionText: ['', Validators.required],
questionHelp: '',
questionNote: '',
remarks:'',
multiAns: [false],
answers: this.fb.array([]),
subflow:'',
});
}
Above file is for Answer and Sub flow Drop down. Can anyone here who can help me for solving this issue. below is the screenshot for that save button.
1.Diabled Save Button after selecting sub flow option
2.Enabled Save Button after selecting Answer Option
I am using Bootstrap 5 and can not get the date icon to appear after the date selection input. It is appearing under it.
This is my code:
<form data-toggle="validator" class="container-fluid" role="form" id="gymUpdateForm">
<div class="col-lg-12 col-md-12 col-sm-12 col-12 beta container-fluid">
<div class="row">
<div class="col-lg-8 col-md-8 col-sm-7 col-12">
<div class="row">
<label class="control-label control-label-left col-lg-3 col-md-3 col-sm-5 col-12" for="updateDescription">Description:<span class="req"> *</span></label>
<div class="controls col-lg-6 col-md-7 col-sm-7 col-12">
<input type="text" id="updateDescription" name="updateDescription" placeholder="Description">
</div>
</div>
</div>
<div class="col-lg-3 col-md-3 col-sm-4 col-6">
<div class="input-group">
<label class="control-label control-label-left col-lg-2 col-md-2 col-sm-2 col-2" for="updateArchive">Archived:</label>
<div class="date col-lg-5 col-md-7 col-sm-7 col-12" id="datepicker1">
<input type="text" class="form-control fullWidth" id="updateArchive" name="updateArchive" placeholder="DD/MM/YYYY">
<span class="input-group-addon" style="background-color:#ddd;">
<i class="fa fa-calendar" style="padding:5px;"></i>
</span>
</div>
</div>
</div>
</div>
<div class="container">
<button type="submit" id="updateGym" class="btn btn-large btn-warning" >Update</button>
<button type="button" id="cancelGym" class="btn btn-large btn-warning" >Return</button>
</div>
</div>
</form>
The answer is: input-group
<div class="input-group date col-lg-5 col-md-7 col-sm-7 col-12" id="datepicker1">
When I copy this code into my editor the #ddd background shows immediately next to the date input box, not below it. However, the background only is showing, no calendar icon, which is strange. This might be because the Class prefix for it should be FAS rather than FA (FA is an older version of Font Awesome).
I know how to do a POST html form. However, I have a weird input system right now, and I am confused on how to switch to an HTML Post form.
Here is the HTML code:
<div class="container-fluid" id='room-create' hidden>
<div class="row">
<div class="col-12 h2 mt-5 text-center">Create Room</div>
</div>
<div class="row mt-2">
<div class="col-12 text-center">
<span class="form-text small text-danger" id='err-msg'></span>
</div>
<div class="col-12 col-md-4 offset-md-4 mb-3">
<label for="room-name">Room Name</label>
<input type="text" id='room-name' class="form-control rounded-0" placeholder="Room Name">
</div>
<div class="col-12 col-md-4 offset-md-4 mb-3">
<label for="your-name">Your Name</label>
<input type="text" id='your-name' class="form-control rounded-0" placeholder="Your Name">
</div>
<div class="col-12 col-md-4 offset-md-4 mb-3">
<button id='create-room' class="btn btn-block rounded-0 btn-info">Create Room</button>
</div>
<div class="col-12 col-md-4 offset-md-4 mb-3" id='room-created'></div>
</div>
</div>
I already tried switching the first div to a form, but to no avail. How would I make the switch to have this post data to my server ("/")?
What I already tried:
<form action="/" method="post" class="container-fluid" id='room-create' hidden>
<!--- other code here ---->
</div>
(I also did the same switch in the second div, the div with `class="row mt-2"`)
Any help is appreciated!
Thanks so much
I ended up wrapping the entire collection of elements (including the outer divs) in a form. However, it was actually the id of the submit button that was messing it up. I am still not sure why this happened, but for some odd reason, when I remove the id it works.
Just wrap the relevant divs who contain the inputs and the button with form tags. And add type attribute with submit value to the button .
<form action="/" method="post">
<div class="col-12 col-md-4 offset-md-4 mb-3">
<label for="room-name">Room Name</label>
<input type="text" id='room-name' class="form-control rounded-0" placeholder="Room Name">
</div>
<div class="col-12 col-md-4 offset-md-4 mb-3">
<label for="your-name">Your Name</label>
<input type="text" id='your-name' class="form-control rounded-0" placeholder="Your Name">
</div>
<div class="col-12 col-md-4 offset-md-4 mb-3">
<button type="submit" id='create-room' class="btn btn-block rounded-0 btn-info">Create Room</button>
</div>
</form>
I need to create from with Bootstrap.
When i use the form inline for create a form, it create a padding-right to label and input and not fill all colmun, but i don't need this padding .
whats the problem ? how can i solve this problem ?
<button type="button"
class="btn btn-primary col-md-2 col-xs-2 col-sm-12 col-lg-2 AddCatBtn">افزودن دسته جدید</button>
<div class="AddCategory col-md-12 col-xs-12 col-sm-12 col-lg-12 border-top border-bottom">
<form>
<div class="form-row text">
<div class="form-inline col-md-6 ">
<div class="col-md-2">
<label for="inputEmail4">نام دسته</label>
</div>
<div class="col-md-10 p-0">
<input type="email" class="form-control" id="inputEmail4">
</div>
</div>
<div class="form-inline col-md-6">
<div class="col-md-3">
<label for="inputState">زیر دسته</label>
</div>
<div class="col-md-9 p-0">
<select id="inputState" class="form-control">
<option>one</option>
<option>tow</option>
</select>
</div>
</div>
</div>
</form>
</div>
I am trying to position a well to the center of the page. There are similiar questions on SO, but the code is somewhat different to mine. My HTML is given below:
<div class="container">
<div class="row">
<div class="well col-sm-4" align="center">
<div class="text-center">
<p><h2>Login</h2></p>
</div>
<hr>
<form role="form">
<div class="form-group text-center">
<label for="username">Username</label>
<input type="text" class="form-control" id="username">
</div>
<div class="form-group text-center">
<label for="password">Password</label>
<input type="password" class="form-control" id="password">
</div>
<hr>
<div class="text-center">
<button type="submit" class="btn btn-primary">Submit</button>
<button type="button" class="btn btn-warning">Forgot password</button>
</div>
<hr>
<div class="text-center">
<p>Don't have an account yet? <a>Create one now</a></p>
</div>
</form>
</div>
</div>
</div>
I tried putting the well div inside another div with col-md-12 and other values, but the well did not get centered. Does anyone know how I could center the well in the page?
You could try offsetting columns
Give your columns the class col-sm-offset-4
Like so: <div class="well col-sm-offset-4 col-sm-4">
Example: http://jsfiddle.net/u48v34p7/
<div class="container">
<div class="row">
<div class="col-sm-4 well col-sm-offset-4" align="center">
<div class="text-center">
<p><h2>Login</h2></p>
</div>
<hr>
<form role="form">
<div class="form-group text-center">
<label for="username">Username</label>
<input type="text" class="form-control" id="username">
</div>
<div class="form-group text-center">
<label for="password">Password</label>
<input type="password" class="form-control" id="password">
</div>
<hr>
<div class="text-center">
<button type="submit" class="btn btn-primary">Submit</button>
<button type="button" class="btn btn-warning">Forgot password</button>
</div>
<hr>
<div class="text-center">
<p>Don't have an account yet? <a>Create one now</a></p>
</div>
</form>
</div>
</div>
</div>
Just replace your code here:
<div class="well col-sm-4" align="center">
With this (you can also isolate the style in a CSS class):
<div class="well col-sm-4" style="margin:auto; float:none;">
You could put two dummy divs to make your well centered. I have noticed that you only have one col-sm-4
Try this:
<div class = "col-sm-4"></div>
<div class = "well col-sm-4">
<!-- your content here -->
</div>
<div class = "col-sm-4"></div>
In that way you can have your well centered.
You can also do this
<div class = "well col-md-6 col-md-offset-3">
<!-- content here -->
</div>
To make your well centered on desktop view 1280px and above.