angular 6 material 设计响应式表单重用输入组件

Question

我在 angular 6 中有一个带有 material 设计组件的反应形式。我怎样才能以其他形式重用一些代码（即生日输入字段）？我不想每次都在“< begin birthdate input component >”和“<- end birthdate input component ->”之间复制和粘贴 HTML 代码（见下面的代码）。我认为 ng-include 不再起作用，如果我创建一个新的 angular 6 组件，表单和 material 设计日期字段将不起作用。

<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>

Answer 1

您可以创建由公共字段组成的公共组件，并调用公共表单的选择器。

DEMO

普通-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>

普通-form.component.ts:

@Component({
    selector: 'app-basic-details',
    templateUrl: './basic-details.component.html',
    styleUrls: ['./basic-details.component.scss']
    })

@Input() basicFormGroup: FormGroup;

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:

   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)
  }

angular 6 material 设计响应式表单重用输入组件

angular 6 material design reactive form reusing input components

angular-material2

angular

angular-reactive-forms

angular6