I need to make a working search box. This code doesn't work. Can you help me to fix it?
html:
<form #f="ngForm" (ngSubmit)="onSubmit(f)" #searchForm="ngForm">
<input type="search" placeholder="Search...">
</form>
search-form Component:
#Component({
selector: 'app-search-form',
templateUrl: './search-form.component.html',
styleUrls: ['./search-form.component.css']
})
export class SearchFormComponent {
users: User[];
private s: String;
constructor(private route: ActivatedRoute,
private router: Router,
private userService: UserService) { }
onSubmit(f: NgForm) {
this.userService.findByFS(f.value).subscribe(data => {
this.users = data;})
}
}
I modified your code. It should work like that. You can check usage at https://angular.io/api/forms/NgForm.
Template:
<form #f="ngForm" (ngSubmit)="onSubmit(f)">
<input name="search" type="search" ngModel placeholder="Search...">
</form>
Component:
#Component({
selector: 'app-search-form',
templateUrl: './search-form.component.html',
styleUrls: ['./search-form.component.css']
})
export class SearchFormComponent {
users: User[];
constructor(private userService: UserService) {}
onSubmit(f: NgForm) {
this.userService.findByFS(f.value.search).subscribe(data => this.users = data);
}
}
Related
we tried Autocomplete in angular using codeigniter3 controller as a api. but it not reflected in the angular home page.
Autoserivce.ts
import { HttpClient } from '#angular/common/http';
import { Injectable } from '#angular/core';
#Injectable({
providedIn: 'root',
})
export class AutoService {
private baseURL = 'http://localhost/travelgate/api/item';
constructor(private http: HttpClient) {}
getData() {
return this.http.get(this.baseURL);
}
}
app.component.ts
import { Component, OnInit } from '#angular/core';
import { AutoService } from './auto.service';
#Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css'],
})
export class AppComponent implements OnInit {
title = 'ng-auto-complete';
posts!: any;
name: any;
constructor(private service: AutoService) {}
ngOnInit() {
this.getAllData();
}
getAllData() {
this.service.getData().subscribe((res: any) => {
this.posts = res;
console.log(this.posts);
});
}
nameValue(name: any) {
this.name = name;
console.log(this.name);
}
}
app.Component.html
<div class="container">
<div class="row">
<div class="col-md-12">
<form class="form mt-5">
<label for="exampleDataList" class="form-label">Datalist example</label>
<input class="form-control" list="datalistOptions" id="exampleDataList" placeholder="Type to search..."
(change)="nameValue($any($event.target).value)">
<datalist id="datalistOptions">
<option *ngFor="let post of posts" [value]="post.name">
</datalist>
</form>
</div>
</div>
</div>
item.php
<?php
require APPPATH . 'libraries/REST_Controller.php';
class Item extends REST_Controller {
public function __construct() {
parent::__construct();
$this->load->database();
}
public function index_get($search = 0)
{
if(!empty($name)){
$this->db->select('*');
$this->db->from('rezlive_hotels_city_list');
$this->db->like('name', $name);
$data = $this->db->get()->result_array();
}else{
$query = $this->db->get("rezlive_hotels_city_list");
$resultList=$query->result_array();
$data= json_encode($resultList);
}
$this->response($data, REST_Controller::HTTP_OK);
}
}
screenshot
After start FormControl to my form, they marked in green with ng-valid but didn't use it yet.
When writing text and clear the input it's go ng-invalid as needed and when the input is OK the ng-valid is back as needed.
How to start the fields without ng-valid ? No need any class in this input until it dirty.
Here is my html: (you can see validate need to work only after using one of the fields)
<form [formGroup]="mainForm">
<div class="card-body">
<div class="form-group">
<label for="customerID">ID</label>
<input
type="text"
class="form-control"
id="customerId"
formControlName="customerId"
(click)="validate()"
placeholder="e.g 123456789">
<span class="error invalid-feedback" *ngIf="customerIdInvalid">ID is important, numbers only!</span>
</div>
<div class="form-group">
<label for="firstName">First Name</label>
<input
type="text"
class="form-control"
id="firstName"
name="firstName"
formControlName="firstName"
(click)="validate()"
placeholder="First Name">
<span class="error invalid-feedback" *ngIf="firstName?.invalid">First name invalid, try again</span>
</div>
</div>
</form>
Here is my component:
import { Component, OnInit } from '#angular/core';
import { FormControl, FormGroup, Validators } from '#angular/forms'
#Component({
selector: 'new-customer',
templateUrl: './new-customer.component.html',
styleUrls: ['./new-customer.component.scss']
})
export class NewCustomerComponent implements OnInit {
mainForm = new FormGroup({
customerId: new FormControl(),
firstName: new FormControl()
});
constructor() {}
ngOnInit(): void {
}
get customerIdInvalid(){
return this.mainForm.get('customerId')?.invalid;
}
get firstName(){
return this.mainForm.get('firstName')
}
validate(){
this.mainForm.get('customerId')?.setValidators([Validators.required , Validators.pattern(/^-?([0-9]\d*)?$/) , Validators.minLength(6)]);
this.mainForm.get('firstName')?.setValidators([Validators.required , Validators.pattern('^[a-zA-Z]+$') , Validators.minLength(2)]);
}
}
I change my component to:
import { Component, OnInit } from '#angular/core';
import { FormControl, FormGroup, Validators } from '#angular/forms'
#Component({
selector: 'new-customer',
templateUrl: './new-customer.component.html',
styleUrls: ['./new-customer.component.scss']
})
export class NewCustomerComponent implements OnInit {
mainForm = new FormGroup({
customerId: new FormControl('',[Validators.required , Validators.pattern(/^-?([0-9]\d*)?$/) , Validators.minLength(6)]),
firstName: new FormControl('',[Validators.required , Validators.pattern('^[a-zA-Z]+$') , Validators.minLength(2)])
});
constructor() {}
ngOnInit(): void {
}
get customerId(){
return this.mainForm.get('customerId');
}
get firstName(){
return this.mainForm.get('firstName')
}
onSubmit(){
console.log(this.mainForm.valid);
if(this.mainForm.valid){
console.log(this.mainForm.value);
}
}
}
So now all my css with .ng-invalid changed to .ng-dirty.ng-invalid
In that way I will assure only inputs that used will be mark red.
I started to study angular, i created a single crud using Angular 9 and Spring boot, but i have a question, what I'm trying to do is to get the data of the table below and move it for a reactive form to upload the data.
How to solve the issue?
enter image description here
.
enter image description here
<form [formGroup]="form" (ngSubmit)="submit()">
<div class="form-group">
<label for="">Nome</label>
<input type="text" formControlName="nome" class="form-control">
</div>
<div class="form-group">
<label for="">email</label>
<input type="text" formControlName="email" class="form-control">
</div>
<div class="form-group">
<label for="">username</label>
<input type="text" formControlName="username" class="form-control">
</div>
<button class="btn btn-outline-primary"> Salvar</button>
<button [routerLink]="['/']" style="margin-left: 1%;" class="btn btn-outline-warning"> Voltar</button>
</form>
My app-routing.module.ts:
import { NgModule } from '#angular/core';
import { Routes, RouterModule } from '#angular/router';
import { ShowContactComponent } from './Componets/contact/show-contact/show-contact.component'
import { CreateContactComponent } from './Componets/contact/create-contact/create-contact.component'
const routes: Routes = [
{path:'', component:ShowContactComponent},
{path:'create', component:CreateContactComponent},
{path:'create/:id', component:CreateContactComponent}
];
#NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }
import { Component, OnInit } from '#angular/core';
import { FormBuilder, FormGroup, Validators } from '#angular/forms';
import { Contact } from '../contact-model/Contact';
import { ContactService } from '../../contact.service';
import { Router, ActivatedRoute } from '#angular/router';
#Component({
selector: 'app-create-contact',
templateUrl: './create-contact.component.html',
styleUrls: ['./create-contact.component.css']
})
export class CreateContactComponent implements OnInit {
form:FormGroup;
contacts:Contact[] = []
contact:Contact
constructor(private service:ContactService, private router:Router, private fb:FormBuilder, private AR:ActivatedRoute) { }
ngOnInit() {
// this.paramService();
this.validateForms();
}
submit(){
const formValue = this.form.value;
const contact:Contact = new Contact(formValue.nome, formValue.email ,formValue.username );
this.service.create(contact).subscribe(response =>{
this.contacts.push(response);
this.router.navigate([''])
console.log(response);
})
}
paramService(){
const formValue = this.form.value;
const contact:Contact = new Contact(formValue.nome, formValue.email ,formValue.username );
console.log(contact);
this.service.readOne(this.contact.id).subscribe(response =>{
this.form.patchValue({
nome: contact.nome,
email: contact.email,
username: contact.username
});
});
}
validateForms(){
this.form = this.fb.group({
nome: ['', Validators.required],
email: ['', Validators.required],
username: ['', Validators.required]
})
}
}
You can do it in this way:
validateForms(data?: Contact){
this.form = this.fb.group({
nome: [data.name || '', Validators.required],
email: [data.email || '', Validators.required],
username: [data.username || '', Validators.required]
})
}
Now you should pass the data to show in your form:
ngOnInit() {
// const contact: Contact = ...
this.validateForms(contact);
}
Please change 'validateForms' name to 'initForm'.
I'm new to angular, and I'm trying to insert new values and display them in a table. Thus, I have three components, one for listing the information of a user user-list, one for creating the information raws user-form and one for the presentation of these information single-user.
My issue is when I try to insert a new information raw, the table liste doesn't update or refresh it self even I did the redirection to it, and I don't know the raison why.
May someone gives me any indication. thanks in advance.
User-list.component.ts:
import { Component, OnInit, OnDestroy } from '#angular/core';
import { Router } from '#angular/router';
import { UserService } from '../services/user.service';
import { Subscription, Observable } from 'rxjs';
import { User} from '../model/user.model';
#Component({
selector: 'app-user-list',
templateUrl: './user-list.component.html',
styleUrls: ['./user-list.component.css']
})
export class UserListComponent implements OnInit, OnDestroy {
constructor(private router: Router, private userService : UserService ) { }
userSubscription: Subscription;
users: Observable<User[]>;
ngOnInit() {
this.reloadData();
}
reloadData(){
this.userSubscription = this.userService.getResource("/users").subscribe(
data =>{
this.users= data;
console.log(this.users);
},
error => { console.log(error);
}
);
}
ngOnDestroy() { this.userSubscription.unsubscribe(); }
}
User-list.component.html:
<div id="page-wrapper">
<div class="main-page">
<div class="tables">
<app-user-form></app-user-form>
<div class="table-responsive bs-example widget-shadow" data-example-
id="contextual-table">
<table class="table table-hover ">
<thead>
<tr>
<th>#</th>
<th>Name</th>
<th>Age</th>
<th>Action</th>
</tr>
</thead>
<tbody class="body">
<ng-container *ngFor="let u of users">
<tr class="active"
app-single-user
[IdUser] = "u.idUser"
[NameUser] = "u.nameUser"
[AgeUser] = "u.ageUser"
>
</tr>
</ng-container>
</tbody>
</table>
</div>
</div>
</div>
</div>
User-form-component.ts
#Component({
selector: 'app-user-form',
templateUrl: './user-form.component.html',
styleUrls: ['./user-form.component.css']
})
export class UserFormComponent implements OnInit {
userForm: FormGroup;
constructor(private formBuilder: FormBuilder,
private router: Router,
private userService: UserService
) { }
ngOnInit() {
this.initForm();
}
initForm() {
this.userForm = this.formBuilder.group({
nameUser: ['', Validators.required],
ageUser: ['', Validators.required]
});
}
reInitForm() {
this.userForm = this.formBuilder.group({
nameUser: '',
ageUser: ''
});
}
onSubmit(){
const formValue = this.userForm.value;
const newuser = new User(
formValue['nameUser'],
formValue['ageUser']
);
this.userService.postResource('/users', newUser).subscribe(
data =>{
console.log(data)
},
error=>{
console.log(error)
}
);
this.reInitForm();
this.router.navigate(['/users']);
}
}
user-form-component.html:
<div class="table-responsive bs-example widget-shadow" data-example-id="contextual-table">
<div class="main-page">
<form [formGroup]="userForm" (ngSubmit)="onSubmit()" class="form-inline">
<div class="form-group">
<input type="text" class="form-control" id="name"
formControlName="nameUser" name="name" required>
<input type="text" class="form-control" id="age"
formControlName="ageUser" name="age" required>
</div>
<button type="submit" class="btn btn-success"
[disabled]="userForm.invalid">Submit</button>
</form>
</div>
</div>
I tried the redirect to the same component this.router.navigate(['/users']); in oder to refresh the content of the table but it doesn't work.
I appreciate it if someone can give me some hints or indications to solve it. thanks
As mentioned in the comments, users should be of type User[] since you are assigning the subscribed value to it and navigating to the same component will not cause the component to rerender.
Instead you can use #Output to achieve this. Once you add the newUser, you refresh the data in your parent component(user-list.component.ts).
user-form-component.ts
#Output() submitted = new EventEmitter<void>();
Then on success of your POST API, emit the event
this.userService.postResource('/users', newUser).subscribe(
data => {
console.log(data);
this.submitted.emit();
},
error => {
console.log(error);
}
);
In your parent component's template, you need to add this event to your custom component.
user-list.component.html
<app-user-form (submitted)="onSubmit($event)"></app-user-form>
Then in your parent component.
user-list.component.html
onSubmit() {
this.reloadData();
}
For more information on how to use #Output, see the docs.
I want that when the user checks on checkbox, the value be "l.code" instead of a Boolean value
Here's my code
<div class="form-group">
<label>Critères : </label>
<div class="checkbox-inline" *ngFor="let l of lesCriteres; let i= index">
<label>
<input type="checkbox" [value]="l.code" [(ngModel)]="actif.lesCriteresActifs[i].critere.code">{{l.code}}
</label>
</div>
</div>
But it does not work ! when I check, it gives me "true" instead of "l.code". Thanks !
You can use "change" event handler with event binding on checkbox.
In html
<form>
<div *ngFor="let l of lesCriteres">
<input type="checkbox" value="l.code" (change)="onChangeEvent($event, l.code)"> {{l.code}}<br>
</div>
</form>
In ts
onChangeEvent(eventValue, valueOfCheckbox){
alert(valueOfCheckbox);
}
You can do something like below :
HTML:
<div *ngFor="let data of emails">
<input type="checkbox" [value]="data.email" (change)="onChange(data.email, $event.target.checked)"> {{data.email}}<br>
</div>
ts:
import { Component } from '#angular/core';
import { FormGroup, FormBuilder, FormArray, FormControl } from '#angular/forms';
#Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
name = 'Angular 6';
emailFormArray = [];
emails = [{ email: "email1" }, { email: "email2" }, { email: "email3" }, { email: 'email4' }]
myForm: FormGroup;
constructor(private fb: FormBuilder) { }
ngOnInit() {
this.myForm = this.fb.group({
useremail: this.fb.array([])
});
}
onChange(email: string, isChecked: boolean) {
if (isChecked) {
this.emailFormArray.push(email);
} else {
let index = this.emailFormArray.findIndex(x =>{
console.log(x);
return x == email
});
console.log(index)
this.emailFormArray.splice(index,1);
}
console.log(this.emailFormArray)
}
}
STACKBLITZ