Question

我有一个与材料设计组件成角度6的反应形式。如何实现以其他某种形式重用某些代码（即生日日期输入字段）？我不想每次都将HTML代码复制并粘贴在“ <开始生日输入组件>”和“ <-结束生日输入组件->”之间（请参见下面的代码）。我认为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>

Answer 1

您可以创建由公用字段和公用形式的调用选择器组成的公用组件。

DEMO

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

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

角度6材料设计反应形式重复使用输入组件

1 个答案: