[英]angular 6 material design reactive form reusing input components
I have a reactive form in angular 6 with material design components. 我有一个角度为6的反应形式,带有材料设计组件。 How can I achieve to reuse some code (ie birthdate input field) in some other form?
如何实现以其他某种形式重用某些代码(即生日日期输入字段)? I don't want to copy & paste the HTML code between "< begin birthdate input component >" and "<- end birthdate input component ->" each time (see code below).
我不想每次都将HTML代码复制并粘贴在“ <开始生日输入组件>”和“ <-结束生日输入组件->”之间(请参见下面的代码)。 I think ng-include does not work anymore and if I create a new angular 6 component the form and material design date field does not work.
我认为ng-include不再起作用,如果我创建一个新的angular 6组件,则表单和材料设计日期字段将不起作用。
<form [formGroup]="formGroupModel" (ngSubmit)="onSubmit()" novalidate>
<!-- begin birthdate input component -->
<div fxFlex="250px">
<mat-form-field>
<input matInput [matDatepicker]="geburtstagPicker" [min]="RangeValues.minValueGeburtstag" [max]="RangeValues.maxValueGeburtstag" placeholder="{{ 'Label_Geburtstag' | translate }}" formControlName="geburtstagControl" required (keyup)="geburtstagControl.valid ? parsedGeburtstagValue : parsedGeburtstagValue = null">
<mat-datepicker-toggle matSuffix [for]="geburtstagPicker"></mat-datepicker-toggle>
<mat-datepicker #geburtstagPicker></mat-datepicker>
</mat-form-field>
<div *ngIf="geburtstagControl.hasError('matDatepickerParse') && geburtstagControl.value != ''" class="alert alert-warning form-control-sm">
{{ 'DATE_IS_INVALID' | translate }}
</div>
<div *ngIf="geburtstagControl.hasError('matDatepickerMin') && geburtstagControl.value != ''" class="alert alert-warning form-control-sm">
{{ 'MIN_VALUE_ERROR' | translate }}: {{ RangeValues.minValueGeburtstag | date:format:'shortDate' }}
</div>
<div *ngIf="geburtstagControl.hasError('matDatepickerMax') && geburtstagControl.value != ''" class="alert alert-warning form-control-sm">
{{ 'MAX_VALUE_ERROR' | translate }}: {{ RangeValues.maxValueGeburtstag | date:format:'shortDate' }}
</div>
</div>
<!-- end birthdate input component -->
</form>
You can create common component consisting common fields and call selector of common form. 您可以创建由公共字段组成的公共组件,并创建具有公共形式的选择器。
common-form.component.html: 共form.component.html:
<div [formGroup]="basicForm">
<mat-form-field>
<input matInput placeholder="First Name" formControlName="firstName">
</mat-form-field>
<mat-form-field>
<input matInput placeholder="Middle Name" formControlName="middleName">
</mat-form-field>
<mat-form-field>
<input matInput placeholder="Last Name" formControlName="lastName">
</mat-form-field>
</div>
common-form.component.ts: 共form.component.ts:
@Component({
selector: 'app-basic-details',
templateUrl: './basic-details.component.html',
styleUrls: ['./basic-details.component.scss']
})
@Input() basicFormGroup: FormGroup;
parent.component.html: parent.component.html:
<form [formGroup]="form" (ngSubmit)="save()">
<app-basic-details [basicForm]="form"></app-basic-details>
<mat-form-field>
<input placeholder="age" matInput formControlName="age">
</mat-form-field>
<mat-form-field>
<input placeholder="Class" matInput formControlName="className">
</mat-form-field>
<button mat-raised-button type="submit" color="primary">Save</button>
</form>
<div>
{{form.value | json}}
</div>
parent.component.ts: parent.component.ts:
form: FormGroup;
constructor(private fb: FormBuilder) { }
ngOnInit() {
this.form = this.fb.group({
age: null,
className: null,
firstName: null,
middleName: null,
lastName: null
})
}
save(){
console.log(this.form.value)
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.