Question

我想从角度为模板从模板中删除重复的html。当我使用带引导程序的CSS的html时，相同的部分重复。请帮我从react-redux Field组件中重复使用。

<form [formGroup]="departmentForm">
            <fieldset>
                <div class="form-group" [ngClass]="{'has-error' : ((departmentForm.get('name').touched || formSubmitted) && !departmentForm.get('name').valid)}">
                    <label for="name" class="control-label">Department Name</label>
                    <input class="form-control" type="text" formControlName="name" id="name" autofocus>
                    <span class="help-block" *ngIf="((departmentForm.get('name').touched || formSubmitted) && !departmentForm.get('name').valid)">
                      <span *ngIf="departmentForm.get('name').errors.required">
                        Please enter department name
                      </span>
                    </span>
                </div>

                <div class="form-group" [ngClass]="{'has-error' : ((departmentForm.get('order').touched || formSubmitted) && !departmentForm.get('order').valid)}">
                    <label for="order" class="control-label">Department Order</label>
                    <input class="form-control" type="text" formControlName="order" id="order">
                    <span class="help-block" *ngIf="((departmentForm.get('order').touched || formSubmitted) && !departmentForm.get('order').valid)">
                          <span *ngIf="departmentForm.get('order').errors.required">
                            Please enter department order
                          </span>
                    </span>
                </div>

                <div class="form-group">
                    <label for="color" class="control-label">Department Color</label>
                    <input class="form-control" type="color" formControlName="color" id="color" #color (change)="colorChange($event)">
                    <!-- <input [colorPicker]="color" (colorPickerChange)="color=$event" [style.background]="color" [value]="color" /> -->
                </div>


                <div class="form-group">
                    <button class="btn btn-primary" (click)="formSubmitted=true;saveDepartment()">Save</button>
                    <button class="btn btn-secondary" (click)="departmentForm.reset();formSubmitted=false;">Cancel</button>
                </div>
            </fieldset>
        </form>

我正是这样的

<form [formGroup]="departmentForm">
                    <fieldset>
                        <from-field [options]="{ label:'Department Name',  field: 'name', msg: 'Please enter department name'}" [parentGroup]="departmentForm"></from-field>
                        <from-field [options]="{ type: 'number', label:'Department Order',  field: 'order', msg: 'Please enter department order'}" [parentGroup]="departmentForm"></from-field>
                        <from-field [options]="{ type: 'color', label:'Department Color',  field: 'color', msg: 'Please enter color'}" [parentGroup]="departmentForm"></from-field>
                        <div class="form-group">
                            <button class="btn btn-primary" (click)="saveDepartment()">Save</button>
                            <button class="btn btn-secondary" (click)="departmentForm.reset();formSubmitted=false;">Cancel</button>
                        </div>
                    </fieldset>
                </form>

如何避免重复部分

Answer 1

我为表单

创建了一个可重用的组件

import { Component, OnInit, Input, forwardRef } from '@angular/core';
import { FormGroup, FormBuilder, Validators} from '@angular/forms';
import { ControlValueAccessor,NG_VALIDATORS, NG_VALUE_ACCESSOR } from '@angular/forms';

@Component({
  selector: 'from-field',
  template: `<div [formGroup]="parentGroup" 
  class="form-group" [ngClass]="{'has-error' : ((parentGroup.get(options.field).touched) && !parentGroup.get(options.field).valid)}">
                        <label for="name" class="control-label">{{options.label}}</label>
                        <input [type]="options.type||'text'" *ngIf="getFromCon()" class="form-control"  formAttrs="counter" [formControl]="getFromCon()"/>
                        <span class="help-block" *ngIf="((parentGroup.get(options.field).touched) && !parentGroup.get(options.field).valid)">
                  <span *ngIf="parentGroup.get(options.field).errors.required">
                  {{options.msg}}
                  </span>
                        </span>
          </div>
  `
})
export class Departm {

  @Input() options;
  @Input() parentGroup;
  @Input() requiredName;

  getFromCon() {
    return this.parentGroup.controls[this.options.field]
  }  
}

在html中使用组件

<form [formGroup]="departmentForm">
                <fieldset>
                    <from-field [options]="{ label:'Department Name',  field: 'name', msg: 'Please enter department name'}" [parentGroup]="departmentForm"></from-field>
                    <from-field [options]="{ type: 'number', label:'Department Order',  field: 'order', msg: 'Please enter department order'}" [parentGroup]="departmentForm"></from-field>
                    <from-field [options]="{ type: 'color', label:'Department Color',  field: 'color', msg: 'Please enter color'}" [parentGroup]="departmentForm"></from-field>
                    <div class="form-group">
                        <button class="btn btn-primary" (click)="saveDepartment()">Save</button>
                        <button class="btn btn-secondary" (click)="departmentForm.reset();formSubmitted=false;">Cancel</button>
                    </div>
                </fieldset>
            </form>

如何在角分量反应形式中制作可重复使用的部分

1 个答案: