代码之家 › 专栏 › 技术社区 › surfspider

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

angular-reactive-forms angular6 angular-material2 angular

surfspider · 技术社区 · 6 年前

我有一个反应形式的角度6与材料设计组成部分。如何实现以其他形式重用某些代码(即生日输入字段)?我不想每次都在“开始生日输入组件”和“结束生日输入组件”之间复制和粘贴HTML代码(请参阅下面的代码)。我认为ng include不再工作,如果我创建一个新的角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>

1 回复 | 直到 6 年前

Akj 6 年前

可以创建由公共字段组成的公共组件,并调用公共窗体的选择器。

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>

通用格式.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>

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