Open web-dave opened 6 years ago
ng g c books/book-new
{
path: 'new',
component: BookNewComponent
}
<a [routerLink]="['new']" class="btn btn-default btn-sm">
NEW
</a>
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import ...
@NgModule({
imports: [
CommonModule,
BooksRoutingModule,
FormsModule,
ReactiveFormsModule
],
exports: [],
declarations: [...],
providers: []
})
export class BooksModule { }
import { Validators, FormBuilder, FormGroup } from '@angular/forms';
@Component({
selector: 'book-new',
...
})
export class BookNewComponent implements OnInit {
form: FormGroup;
constructor(private formBuilder: FormBuilder) { }
ngOnInit() {
this.form = this.formBuilder.group({
title: ['', [Validators.required, Validators.minLength(6)]],
isbn: ['', [Validators.required, Validators.minLength(6)]],
publisher: this.formBuilder.group({
name: ['', [Validators.required]],
url: ['', [Validators.required]]
})
});
}
}
<form [formGroup]="form" (ngSubmit)="saveBook()">
<div class="form-group">
<label for="title">Title</label>
<input type="text" id="title" formControlName="title">
<div [hidden]="!form.get('title').hasError('required')">
Enter a title
</div>
</div>
<div class="form-group">
<label for="isbn">ISBN</label>
<input type="text" id="isbn" formControlName="isbn">
</div>
<fieldset formGroupName="publisher">
<div class="form-group">
<label>Name:</label>
<input type="text" formControlName="name">
</div>
<div class="form-group">
<label>Url:</label>
<input type="text" formControlName="url">
</div>
</fieldset>
<div [hidden]="!form.get('isbn').hasError('minlength')">
Not a valid ISBN
</div>
<button type="submit" [disabled]="!form.valid">Save</button>
</form>
createBook(book): Observable<IBook> {
const url = `${this.restRoot}`;
return this.http.post<IBook>(url, book);
}
book-new
componentReactiveFormsModule
into BooksModuleValidators
,FormBuilder
andFormGroup
intoBookNewComponent
FormBuilder
in a attribute via DIform
with typeFormGroup
FormBuilder