angular 6 material design reactive form reusing input components

Question

I have a reactive form in angular 6 with material design components. How can I achieve to reuse some code (i.e. 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). 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.

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

Akj · Accepted Answer · 2018-08-03 11:11:53Z

1

You can create common component consisting common fields and call selector of common form.

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

edited Aug 3, 2018 at 11:11

answered Aug 3, 2018 at 10:43

Akj

7,2513 gold badges31 silver badges41 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

surfspider Over a year ago

Thank you worked very well! In order to display the validation errors I could get the control of the parent form as follows *ngIf="basicForm.controls.geburtstagControl.hasError(...)

Collectives™ on Stack Overflow

angular 6 material design reactive form reusing input components

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related