[英]Angular 6 Reactive Forms : How to set focus on first invalid input
[英]How to set model data in Reactive Forms, Angular 9
我開始研究 angular,我使用 Angular 9 和 Spring 引導創建了一個單一的 crud,但我有一個問題,我想做的是獲取下表的數據並將其移動為反應形式以上傳數據。 如何解決這個問題?
<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>
我的 app-routing.module.ts:
import { NgModule } from '@angular/core'; import { Routes, RouterModule } from '@angular/router'; import { ShowContactComponent } from './Comp.nets/contact/show-contact/show-contact.component' import { CreateContactComponent } from './Comp.nets/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] }) } }
你可以這樣做:
validateForms(data?: Contact){
this.form = this.fb.group({
nome: [data.name || '', Validators.required],
email: [data.email || '', Validators.required],
username: [data.username || '', Validators.required]
})
}
現在您應該傳遞數據以顯示在您的表單中:
ngOnInit() {
// const contact: Contact = ...
this.validateForms(contact);
}
請將“validateForms”名稱更改為“initForm”。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.