Pass radio button values to component as Form data on Form Submit in Angular2 - forms

Html template below
<form class="form" #pubForm="ngForm">
<div class="form-group">
<label for="name">Publisher Name:</label>
<input type="text" #name id="name" ngControl="name" #name="ngForm" class="form-control" placeholder="Enter Name" style="width:50%;" required maxlength="50">
<div *ngIf="name.touched && name.errors">
<div class="alert alert-danger" *ngIf="name.errors.required" style="width:50%;">
Name is Required (Maxlength is 50 characters)
</div>
</div>
</div>
<div class="form-group">
<label for="status">Status:</label>
<label class="radio-inline">
<input type="radio" name="options" (click)="model.options = 'active'" [checked]="'active' === model.options">Active
</label>
<label class="radio-inline">
<input type="radio" name="options" (click)="model.options = 'inactive'" [checked]="'inactive' === model.options">Inactive
</label>
</div>
<div class="form-group">
<button type="submit" class="btn btn-default" (click)="onSubmit(pubForm.value)">Submit</button>
<button type="cancel" class="btn btn-default">Cancel</button>
</div>
</form>
Component code below
model = { options: 'active' };
onSubmit(form:any) : void {
form.status = this.model.options;
console.log(form);
}
On console log now I get object on form submit but I want to pass radio button value as name input box value is passed automatically on form submit in my form above. How to do pass radio button selection as form data ? The input name above is being passed automatically on click of Submit.

Related

Aspnet.Core MVC, how to bind a list of a group of inputs?

I am using aspnetcore mvc, dotnet version 6. I am trying to get inputs in a view. Code below i am trying to get buyer users and delivery users in a list. But i can't bind them in a list of model from controller.
Here is my codes:
public async Task<IActionResult> SendMainFlow(List<IFormFile> files, string[] DeliveryUsers, List<BuyerUsers> BuyersModel)
{
return BadRequest();
}
From the view:
<form class="col-12 col-md-6" method="POST" action="/WorkManagement/SendMainFlow" enctype="multipart/form-data">
<div class="">
<label>
Dosyalar:
</label>
<input type="file"
class=" col-12"
name="files"
multiple/>
</div>
<hr class="row " />
<div class="row m-1">
<label class="col-12 text-primary">
Satın alacak kişiler:
</label>
<div id="BuyerInputArea" class="col-lg-12">
<div class="inputBuyerRow first-input">
<div class="input-group mb-3">
<input type="text" name="BuyerUserName" class="form-control m-input col" placeholder="İsim" autocomplete="off">
<input type="text" name="BuyerUserLastName" class="form-control m-input col" placeholder="Soyisim" autocomplete="off">
<input type="text" name="BuyerUserMail" class="form-control m-input col" placeholder="E-Posta" autocomplete="off">
<div class="input-group-append">
<button id="removeBuyer" type="button" class="btn btn-danger">Kaldır</button>
</div>
</div>
</div>
<button id="addBuyer" type="button" class="btn btn-info">Kişi Ekle</button>
</div>
</div>
<hr class="row " />
<div class="row m-1">
<label class="col-12 text-primary">
Dağıtılacak kişiler:
</label>
<div id="DeliveryInputArea" class="col-lg-12">
<div id="DeliverySignerRow">
<div class="input-group mb-3">
<input type="text" name="DeliveryUserMail" class="form-control m-input col" placeholder="Mail" autocomplete="off">
<div class="input-group-append">
<button id="removeRow" type="button" class="btn btn-danger">Kaldır</button>
</div>
</div>
</div>
<div id="newRow"></div>
<button id="addDealer" type="button" class="btn btn-info">Kişi Ekle</button>
</div>
</div>
<div class="row m-2">
<button class="col-12 btn btn-info" type="submit">
İŞLEM BAŞLAT
</button>
</div>
</form>
I can get for one user of any type here. I mean a buyer or a delivry user. But i want to get a list of user. And also my code tries to add dynamicaly a #inputBuyerRow in #BuyerUserArea.
Don't confuse with code. Code is simple. I want to post my inputs with form tag. In Controller side, I want to take any type of users into a list. I did not show models because i think it is not neccessary. The main problem is how can i get #inputBuyerRow inputs in BuyerModel like a list of objects? #addBuyer button add more #inputBuyerRow element in code. There will be more users.
How can i do that. Must I do i input group or anything else? I did not find any example.
My constraints are:
I can't use Ajax Jquery or anything else like them. I must use form tag.
I must use list in controller side.
Edit: In controller, i tried to get inputs with an string array and model to find out how view send to me. So don't confuse also with this code. I was just trying. Nothing special.
Generally, in an MVC application, when submits the form, in the action method, it will get the data via the html element’s name attribute.
You can access form fields by its name from view to controller
In View
To transfer the string array, the elements should use the same name attribute. like this: name="DeliveryUserMail"
<div id="DeliveryInputArea" class="col-lg-12">
<div id="DeliverySignerRow">
<div class="input-group mb-3">
<input type="text" name="DeliveryUserMail" class="form-control m-input col" placeholder="Mail" autocomplete="off">
<input type="text" name="DeliveryUserMail" class="form-control m-input col" placeholder="Mail" autocomplete="off">
<div class="input-group-append">
<button id="removeRow" type="button" class="btn btn-danger">Kaldır</button>
</div>
</div>
</div>
To send the list of model, we should based on the list index to set the name attribute, like this: BuyersModel[0].BuyerUserName
<div class="input-group mb-3">
<input type="text" name="BuyersModel[0].BuyerUserName" class="form-control m-input col" placeholder="İsim" autocomplete="off">
<input type="text" name="BuyersModel[0].BuyerUserLastName" class="form-control m-input col" placeholder="Soyisim" autocomplete="off">
<input type="text" name="BuyersModel[0].BuyerUserMail" class="form-control m-input col" placeholder="E-Posta" autocomplete="off">
</div >
<div class="input-group mb-3">
<input type="text" name="BuyersModel[1].BuyerUserName" class="form-control m-input col" placeholder="İsim" autocomplete="off">
<input type="text" name="BuyersModel[1].BuyerUserLastName" class="form-control m-input col" placeholder="Soyisim" autocomplete="off">
<input type="text" name="BuyersModel[1].BuyerUserMail" class="form-control m-input col" placeholder="E-Posta" autocomplete="off">
</div >
In Controller
[HttpPost]
public ActionResult Create2(string[] DeliveryUserMail, List<BuyerUsers> BuyersModel)
{
//Access string, list here
}
The result is like this:

How to access to RESTController through a controller?

I am using Spring.
The method in my RESTController is this,
http://localhost:8080/delivery-api/training/submit. It is able to save hard code values into database.
This is part of my html form, it can be open up using this URL: http://localhost:8080/delivery-web/training/apply.
<form th:object="${applyForm}" class="form-horizontal" role="form" method="post" action="http://localhost:8080/delivery-api/training/submit" >
<div class="form-group">
<label class="col-sm-3 control-label no-padding-right"
for="form-field-1" > Country </label>
<div class="col-sm-9">
<input type="text" id="form-field-1" placeholder="Country"
class="col-xs-10 col-sm-7" th:field="*{country}" />
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label no-padding-right"
for="form-field-1"> Fee </label>
<div class="col-sm-9">
<input type="text" id="form-field-1" th:field="*{Fee}" class="col-xs-10 col-sm-7" />
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label no-padding-right"
for="form-field-1"> Start Date </label>
<div class="col-sm-9">
<input type="date" id="form-field-1" th:field="*{startDate}"
class="col-xs-10 col-sm-7" />
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label no-padding-right"
for="form-field-1">End Date </label>
<div class="col-sm-9">
<input type="date" id="form-field-1" th:field="*{endDate}"
class="col-xs-10 col-sm-7" />
</div>
</div>
<br> <br>
<button class="btn btn-info" type="submit">
<i class="ace-icon fa fa-check bigger-110"></i> Submit
</button>
</div>
</div>
</form>
When I click on submit, it can be directed to http://localhost:8080/delivery-api/training/submit and insert the hard coded values into database, but it did not direct to my application-form.html page after that.
My controller
#PostMapping(value = "/apply")
public String apply(#Valid #ModelAttribute("applyForm") DeliveryApplicationForm applyForm, BindingResult errors, Model model) {
model.addAttribute("applyForm", applyForm);
return VIEW_PATH + "application-form";
}
I would like to render html page and also pass data from my form to RESTController method through a controller after I click on the submit button in my html page.
May I know how I can do it?

Angular 4 form validation with input fields and checkboxes

I have this form right here:
<form (ngSubmit)="onSubmit()" #testForm="ngForm">
<div class="form-group col">
<label for="a">a</label>
<select class="form-control" id="a" [(ngModel)]="form.a" name="a" required>
<option value="x">x</option>
<option value="y">y</option>
</select>
</div>
<div class="form-group">
<label for="b">b</label>
<input class="form-control" id="b" [(ngModel)]="form.b" name="b" required />
</div>
<div class="form-check">
<label class="form-check-label">
<input type="checkbox" class="form-check-input">c
</label>
</div>
<div class="form-check">
<label class="form-check-label">
<input type="checkbox" class="form-check-input">d
</label>
</div>
<div class="col text-right">
<button type="submit" class="btn btn-success" [disabled]="!testForm.form.valid">Submit</button>
</div>
</form>
With this component-code behind:
export class FormComponent {
form = new Form();
submitted = false;
onSubmit() {
this.submitted = true;
}
}
What I want to achieve is that my button only gets enabled, when both the dropdown and the input field are filled in, which works with the required attribute, AND both checkboxes are checked, which doesn't work.
My question: Is there something like required for Checkboxes, or are there other ways to solve this problem?
Try this way:
<div class="form-check">
<label class="form-check-label">
<input type="checkbox" [checked]="ch2" (change)="ch2= !ch2" class="form-check-input">c
</label>
</div>
<div class="form-check">
<label class="form-check-label">
<input type="checkbox" [checked]="ch1" (change)="ch1= !ch1" class="form-check-input">d
</label>
</div>
<div class="col text-right">
<button type="submit" class="btn btn-success" [disabled]="!testForm.form.valid || !ch1 || !ch2">Submit</button>
</div>

Angular Form Validation error : form is undefined

I am trying to validate my data for a student object with Angular Form Validation, but when I want to use or print for example, the serialNumber of a student it gives me this error: Cannot read property 'serialNumber' of undefined.
Here is the code:
<div *ngIf="student">
<div class=container>
<h2>Student {{student.name}} details</h2>
<form name="studentForm" (ngSubmit)="save()">
<!--<div ng-class="{ 'has-error' : studentForm.serialNumber.$invalid && !studentForm.serialNumber.t">-->
<label>Serial number: {{student.serialNumber}} </label>
<input type="text" name="serialNumber" class="form-control" ng-model="student.serialNumber" required>
<div ng-messages="studentForm.serialNumber.$error">
{{studentForm.serialNumber}}
<p ng-message="required">Your name is required!</p>
</div>
<!--</div>-->
<div>
<label>Name: {{student.name}}</label>
<input ng-model="student.name" placeholder="name">
</div>
<div>
<label>Group number: {{student.groupNumber}}</label>
<input ng-model="student.groupNumber" placeholder="groupNumber">
</div>
<button (click)="goBack()">Back</button>
<button (click)="save()">Save</button>
</form>
</div>
</div>
The ng-messages and ng-model attribute directives do not exist in Angular 2+. I would recommend reading into Angular Forms, ReactiveForms, and Template Syntax.
If you would like to dual data-bind the input values, you can do so with the following syntax: [(ngModel)]="student.serialNumber". However, in Angular 2+, there are usually better ways of getting values other than explicitly data-binding.
Angular Form Validation template Driven Model
onSubmit(form : NgForm) {
console.log(form);
}
<form #form="ngForm" (ngSubmit)="onSubmit(form)"
[ngClass]="{'was-validated': form.invalid && (form.dirty || form.touched)}">
<div class="" ngModelGroup="User">
<h2 class="text-center">Registration page</h2>
<br />
<div class="form-group">
<input type="text" class="form-control" placeholder="First Name" name="firstname" required
ngModel #firstname="ngModel">
<span class="help-bpx" *ngIf="firstname.touched && !firstname.valid ">Please enter the
firstname</span>
</div>
<div class="form-group">
<input type="text" class="form-control" placeholder="Last Name" name="lastname" required ngModel
#lastname="ngModel">
<span class="help-bpx" *ngIf="lastname.touched && !lastname.valid ">Please enter the
lastname</span>
</div>
<div class="form-group">
<input type="email" class="form-control" id="email" placeholder="Email" name="email" email
required ngModel #email="ngModel">
<span class="help-bpx" *ngIf="email.touched && !email.valid ">Please enter the Email
Value</span>
</div>
<div class="form-group">
<div class="custom-file">
<input type="file" class="custom-file-input" id="customFile" required ngModel name="file" #file="ngModel">
<label class="custom-file-label" for="customFile">Choose file</label>
</div>
</div>
<br />
<div class="align-center">
<button type="submit" class="btn btn-primary" [disabled]="!form.valid">Register</button>
</div>
</div>
</form>

Bootstrap submit button won't work

I have the below code where I'm trying to submit data from a form into my back-end. Whenever I press the button it doesn't do anything and it's supposed to route to the specified place. I have looked at several examples and still hasn't worked. Below is my form. Any suggestions?
<div class="container">
<div class="row">
<div class="col-md-4 col-md-offset-4 text-center">
<h1>Sign Up</h1>
<form action ="/adduser" method="POST" id="adduser">
<fieldset class="form-group">
<label for="InputUsername"> Username </label>
<input type="text" class="form-control" name="username" id="InputUsername" placeholder="Enter username">
</fieldset>
<fieldset class="form-group">
<label for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control" name="email"id="exampleInputEmail1" placeholder="Enter email">
<small class="text-muted">We'll never share your email with anyone else.</small>
</fieldset>
<fieldset class="form-group">
<label for="exampleInputPassword1">Password</label>
<input type="password" class="form-control" name="password"id="exampleInputPassword1" placeholder="Password">
</fieldset>
<button class="btn btn-default" form="signup" type="submit">Sign up</button>
</form>
</div>
</dv>
</div>
Here is my route
#app.route('/adduser', methods=["POST"])
def adduser():
print(request.form, file=sys.stderr)
username = request.form['username']
password = request.form['password']
email = request.form['email']
models.User.create_user(email, password, username)
login_user(user)
return redirect_url('index.html')
Your button has a form attribute of signup but your form has an id of adduser, so the button does not belong to the form. Try changing these values to match.