I am not able to get value from radio buttons in reactive form. It always come empty string. How could I solve that? Below is the code for that:
<form (ngSubmit)="onSubmit(segment_abc)" [formGroup]="segment_abc">
<div class="container">
<div class="row product-chooser">
<div class="col-md-4 col-sm-6 selected product-chooser-item" id="div1" tabindex="-1">
<div class="pricingTable">
<i class="fa fa-rupee"> 400</i><span class="gst"> + GST</span>
<input type="radio" formControlName="segment123" [value]=1>
<!-- Subscribe Now -->
</div>
</div>
</div>
</div>
</div>
<div class="col-md-4 col-sm-6 product-chooser-item" id="div2" tabindex="-1">
<div class="pricingTable">
<div class="bottom">
<div class="txt_400">
<i class="fa fa-rupee"> 1000</i><span class="gst"> + GST</span>
<input type="radio" formControlName="segment123" [value]=2>
<!-- Subscribe Now -->
</div>
</div>
</div>
</div>
</div>
<div class="col-md-4 col-sm-6 product-chooser-item" id="div3" tabindex="-1">
<div class="pricingTable pricingTablepremium">
<input type="radio" formControlName="segment123" [value]=3 (click)="openValue()">
<!-- Subscribe Now -->
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- <button type="submit" class="btn btn_form" (click)="open(content,'email')">Submit</button> -->
<button type="submit" class="btn btn_form" >Submit</button>
</div>
There is no output in when I am getting values in form control
Related
I am trying to display content in two columns in HTML5. But, somehow, I am doing something wrong. Here's my HTML code
.column1 {
float: left;
width: 70%;
}
<div class="cd-admin-upper-container container-fluid">
<div class="row">
<div class="column1">
<h1>Device UnAssignment</h1>
<div>
<div class="alert alert-info" style="height : 50%; margin-bottom : 2vw;width: 40%">
<label class="cd-admin-create-modal-label">Patient Name: </label>
<label class="cd-admin-create-modal-label">Device Serial Number: </label>
</div>
<div>
<button type="submit" class="btn btn-primary" style="margin-left: 3%"
ng-click="unassignDevice(device.patientId);"><span title="UnAssign Device"></span> UnAssign
</button>
</div>
</div>
<div class="column2">
<h1>Device Assignment</h1>
<p>Hello this is column two</p>
</div>
</div>
</div>
</div>
Here's the JSFiddle link - http://jsfiddle.net/chandham/k39vpafd/
I somehow nested column1 and column2 in same div. Here's the updated code.
<div class="cd-admin-upper-container container-fluid">
<div class="row">
<div class="column1">
<h1>Device UnAssignment</h1>
<div class="alert alert-info" style="height : 50%; margin-bottom : 2vw;width: 40%">
<label class="cd-admin-create-modal-label">Patient Name: </label>
<label class="cd-admin-create-modal-label">Device Serial Number: </label>
</div>
<div>
<button type="submit" class="btn btn-primary" style="margin-left: 3%" ng-click="unassignDevice(device.patientId);"><span title="UnAssign Device"></span> UnAssign
</button>
</div>
</div>
<div class="column2">
<h1>Device Assignment</h1>
<p>Hello this is column two</p>
</div>
</div>
</div>
I am trying to write an "or" in between 2 ".col-md-1".
For example:
Green or Blue
This is my code:
<div class="row">
<div class="col-md-1">
<button class="btn">Green</button>
</div>
<div class="col-md-1">
<button class="btn">Blue</button>
</div>
</div>
What should I write inside the code or should I try another technique?
You could add another col-md-1 between the 2 elements (or whatever column size suits your needs):
<div class="row">
<div class="col-md-1">
<button class="btn">Green</button>
</div>
<div class="col-md-1">
<p>or</p>
</div>
<div class="col-md-1">
<button class="btn">Blue</button>
</div>
</div>
Depends on how the result should look like. You can do something like this for example:
<div class="col-md-3">
<button class="btn"> Green </button> or <button class="btn"> Blue </button>
</div>
Give them and ID.
<div class="row">
<div class="col-md-1" id="green">
<button class="btn">Green</button>
</div>
<div class="col-md-1" id="blue">
<button class="btn">Blue</button>
</div>
</div>
and then you can select the first one and append an element after it
$("$green").after('<div>OR</div>')
give them an ID & do the if else in Javaascript
<div class="row">
<div id="greenDiv" class="col-md-1">
<button class="btn">Green</button>
</div>
<div id= "redDiv" class="col-md-1">
<button class="btn">Blue</button>
</div>
</div>
in js
<script>
$(document).ready(function(){
if(someCondition == true){
$("#redDiv").show();
$("#greenDiv").hide();
}else{
$("#redDiv").hide();
$("#greenDiv").show();
}
});
</script>
Im trying to show a new question from a quiz within a modal when the next button is clicked. I havent used angular 2 before and so im sure im missing a few trivial parts. i know that questions are accessible from the html as i have displayed them in other ways but i cant get them to show in a modal one by one.
html:
<div id="modal" class="modal modal-fixed-footer" materialize="modal" [materializeActions]="actions">
<div class="modal-content">
<div *ngIf="let question of questions[pager.index];">
<div class="badge badge-info">Question {{pager.index + 1}} of {{questions.length}}.</div>
<p>{{pager.index + 1}}. <span [innerHTML]="question.text"></span></p>
<div class="row text-left answers">
<div class="col-md-6" *ngFor="let answer of question.answers">
<div class="answer">
<label class="">
<input type="checkbox" (change)="onSelect(answer.text);"/>
{{answer.text}}
</label>
</div>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button class="btn btn-primary" (click)="goTo(pager.index + 1);">Next</button>
</div>
</div>
Any help would be great. Thanks
You are using *ngIf in wrong way, you can add question field to your Component and fill it with questions[pager.index] in goTo(index) function.
This looks a little different to my original code but this is how i achieved it in the
<div *ngIf="pager.index < questions.length">
<h5 class="flow-text"><span [innerHTML]="questions[pager.index].text"></span></h5>
<br>
<div class="row text-left">
<div class="col s12 m12" *ngFor="let answer of questions[pager.index].answers">
<div class="answer">
<input type="checkbox" [(ngModel)]="answer.selected" (change)="onSelect(answer)"/><label class="black-text flow-text"> {{answer.text}} </label>
</div>
</div>
</div>
<footer class="row">
<div class="col s6 m6"></div>
<div class="col s6 m6">
<div *ngIf="pager.index < questions.length - 1">
<button id="nextButton" class="btn-flat black-text right flow-text" (click)="goTo(pager.index + 1);">Next</button>
</div>
<div *ngIf="pager.index == questions.length - 1">
<button id="nextButton" class="btn-flat black-text right flow-text" (click)="goTo(pager.index + 1);">Finish</button>
</div>
</div>
</footer>
</div>
I am using an Angular 2 template (which looks fine to me):
<div class="container gt-container-fluid gt-container-form">
<div class="row">
<div class="col-sm-6">
<fieldset class="gt-fieldset">
<legend class="gt-legend">Details</legend>
<div class="row gt-row">
<div class="col-6"><label for="title">Requirements Title:</label></div>
<div class="col-6"><input id="title" type="text" class="k-textbox" [(ngModel)]="Requirement.Title" /></div>
</div>
<div class="row gt-row">
<div class="col-12"><label for="details">Requirements Details:</label></div>
</div>
<div class="row gt-row">
<div class="col-12">
<textarea id="details" class="k-textbox gt-textbox" [(ngModel)]="Requirement.Details"></textarea>
</div>
</div>
<div class="row gt-row">
<div class="col-6"><label for="rating">Requirement Rating:</label></div>
<div class="col-6"><kendo-dropdownlist id="ratings" [data]="ratingsData" [textField]="'ProductName'" [valueField]="'ProductID'" [defaultItem]="ratingsPlaceHolder"></kendo-dropdownlist></div>
</div>
<div class="row gt-row">
<div class="col-6"><label for="status">Approval Status:</label></div>
<div class="col-6"><kendo-dropdownlist id="approvalStatus" [data]=""></kendo-dropdownlist></div>
</div>
</fieldset>
<fieldset class="gt-fieldset">
<legend class="gt-legend">Attachments</legend>
<div class="row gt-row">
<div class="col-12"><label for="attachments">Drag and drop files of click "Select" to browse:</label></div>
</div>
<div class="row gt-row">
<div class="col-12">
<kendo-upload id="Attachments"
[saveUrl]=""
[removeUrl]=""
[disabled]="">
</kendo-upload>
</div>
</div>
</fieldset>
</div>
<div class="col-sm-6">
<kendo-tabstrip>
<kendo-tabstrip-tab [title]="'Framework Items'" [selected]="true">
<template kendoTabContent>
<div class="row gt-row">
<div class="col-6"><label for="framework">Framework Items:</label></div>
<div class="col-6"><kendo-multiselect [data]="frameworkItems" [value]="" [placeholder]="'Framework Items'"></kendo-multiselect></div>
</div>
<div class="row gt-row">
<div class="col-12 gt-col-addremovebuttons">
<button kendoButton (click)="onButtonClick()" [primary]="true">+</button>
<button kendoButton (click)="onButtonClick()" [primary]="true">-</button>
</div>
</div>
<div class="row gt-row">
<div class="col-12">
<kendo-grid [data]="frameworkItemsData" [height]="200">
<kendo-grid-column field="FrameworkLocation" title="ID">
</kendo-grid-column>
<kendo-grid-column field="FrameworkTitle" title="Name">
</kendo-grid-column>
</kendo-grid>
</div>
</div>
</template>
</kendo-tabstrip-tab>
<kendo-tabstrip-tab [title]="'Related Actions'">
<template kendoTabContent>
<div class="row gt-row">
<div class="col-6"><label for="actions">Related Actions:</label></div>
<div class="col-6"><kendo-multiselect [data]="actionItems" [value]="" [placeholder]="'Actions'"></kendo-multiselect></div>
</div>
</template>
</kendo-tabstrip-tab>
</kendo-tabstrip>
</div>
</div>
<div class="row gt-row">
<div class="col-12 gt-col-buttons">
<button kendoButton (click)="saveChanges()" [primary]="true">Save</button>
<button kendoButton (click)="onButtonClick()" [primary]="false">Edit</button>
<button kendoButton (click)="deleteRecord()" [primary]="false">Delete</button>
<button kendoButton (click)="onButtonClick()" [primary]="false">Close</button>
</div>
</div>
</div>
However, it is throwing the following error (amongst others):
Unhandled Promise rejection: Template parse errors: Unexpected closing
tag "legend" (">\n \n
Details[ERROR ->]\n
\n \n Requirements Title:[ERROR ->]\n
\n
Interestingly the code highlighting in the code input in stack overflow shows me the same kind of errors but I can't for the life of me spot the error.
Any help much appreciated!
I'm teaching myself CSS and I'm a bit stuck with my page layout. I'm trying to get my login form to be right of my slider, but nothing I do works. Here's what my layout looks like right now...
Here is my CSS for the form:
.login-body { background-color: #f1f2f7 }
.form-signin {
max-width: 330px;
//margin: 50px auto 50px;
background: #fff;
border-radius: 3px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
}
.form-wrapper { //padding-bottom: 70px }
.login-bg {
margin-top: -40px;
margin-bottom: -50px;
//background-color: #f1f2f7;
}
HTML:
<!-- Sequence Modern Slider -->
<div id="da-slider" class="da-slider">
<div class="da-slide">
<div class="container">
<div class="row">
<div class="col-md-12">
<h2>
<i>BUSINESS TOOLS</i>
<br>
<i>FOR YOUR</i>
<br>
<i>SUCCESS</i>
</h2>
<p>
<i>Data visualized</i>
<br />
<i>to meet your needs!</i>
</p>
<a href="#" class="btn btn-info btn-lg da-link">
Read more
</a>
<div class="da-img">
<img src="img/parallax-slider/images/graph.jpg" alt="" />
</div>
</div>
</div>
</div>
</div>
<div class="da-slide">
<div class="container">
<div class="row">
<div class="col-md-12">
<h2>
<i>RESPONSIVE VIDEO</i>
<br />
<i>SUPPORT AND</i>
<br />
<i>MANY MORE</i>
</h2>
<p>
<i>Lorem ipsum dolor amet</i>
<br />
<i>tempor incididunt ut</i>
</p>
<a href="#" class="btn btn-info btn-lg da-link">
Read more
</a>
<div class="da-img">
<img src="img/parallax-slider/images/3.png" alt="image01" />
</div>
</div>
</div>
</div>
</div>
<div class="da-slide">
<div class="container">
<div class="row">
<div class="col-md-12">
<h2>
<i>USING BEST WEB</i>
</br>
<i>SOLUTIONS WITH</i>
</br>
<i>HTML5/CSS3</i>
</h2>
<p>
<i>Lorem ipsum dolor amet</i>
<br />
<i>tempor incididunt ut</i>
<br />
<i>veniam omnis </i>
</p>
<a href="#" class="btn btn-info btn-lg da-link">
Read more
</a>
<div class="da-img">
<img src="img/parallax-slider/images/1.png" alt="image01" />
</div>
</div>
</div>
</div>
</div>
<!--<nav class="da-arrows">
<span class="da-arrows-prev">
</span>
<span class="da-arrows-next">
</span>
</nav>-->
</div>
<!-- Login start -->
<div class="login-bg">
<div class="container">
<div class="form-wrapper">
<form class="form-signin wow fadeInUp" action="index.html">
<h2 class="form-signin-heading">sign in now</h2>
<div class="login-wrap">
<input type="text" class="form-control" placeholder="User ID" autofocus>
<input type="password" class="form-control" placeholder="Password">
<label class="checkbox">
<input type="checkbox" value="remember-me"> Remember me
<span class="pull-right">
<a data-toggle="modal" href="#myModal"> Forgot Password?</a>
</span>
</label>
<button class="btn btn-lg btn-login btn-block" type="submit">Sign in</button>
<p>or you can sign in via social network</p>
<div class="login-social-link">
<a href="index.html" class="facebook">
<i class="fa fa-facebook"></i>
Facebook
</a>
<a href="index.html" class="twitter">
<i class="fa fa-twitter"></i>
Twitter
</a>
</div>
<div class="registration">
Don't have an account yet?
<a class="" href="registration.html">
Create an account
</a>
</div>
</div>
<!-- Modal -->
<div aria-hidden="true" aria-labelledby="myModal" role="dialog" tabindex="-1" id="myModal" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Forgot Password ?</h4>
</div>
<div class="modal-body">
<p>Enter your e-mail address below to reset your password.</p>
<input type="text" name="email" placeholder="Email" autocomplete="off" class="form-control placeholder-no-fix">
</div>
<div class="modal-footer">
<button data-dismiss="modal" class="btn btn-default" type="button">Cancel</button>
<button class="btn btn-success" type="button">Submit</button>
</div>
</div>
</div>
</div>
<!-- modal -->
</form>
</div>
</div>
</div>
<!-- Login end -->
You could try to give the login form a position: relative tag and then move it to the top by giving it a negative top: property.
If the login form is displayed directly under the slider then you can give top the negative value of the height of the slider and it should work
Design your two parts in separate Div tag.
Give width in percentage and set float property to left