List列表

• 一般由主要信息、主要操作、次要信息、次要操作组成。
• 主要信息和主要操作放在列表的左边，次要信息和次要操作放在列表的右边。

import { FormGroup, Validators, FormControl } from '@angular/forms';
@Component({
  selector: 'demo-list-form',
  template: `
    <form [formGroup]="registerForm">
      <List [renderHeader]=(renderHeader) [renderFooter]=(renderFooter)>
        <InputItem [placeholder]="'please input account'"
                   [error]="isError"
                   [focus]="onFocus"
                   [value]="formData.username"
                   [clear]="true" formControlName="username" id="username"
                   (onErrorClick)="inputErrorClick($event)"
                   (onChange)="inputChange($event)"
        >
          Account
        </InputItem>
        <InputItem id="password"
                   formControlName="password"
                   [placeholder]="'please input password'"
                   [type]="'password'"
                   [(ngModel)]="formData.password"
                   [value]="formData.password"
        >
          Password
        </InputItem>
        <ListItem [extra]="_switch">Confirm Infomation</ListItem>
        <ListItem>
          <Range style="padding: 7px"
                 [defaultValue]=[20,80]
                 [min]=0
                 [max]=100
                 (onAfterChange)="afterChange($event)"
          ></Range>
        </ListItem>
        <ListItem [extra]="_stepper">Number of Subscribers</ListItem>
        <ListItem>
          <a Button [type]="'primary'"
                    [size]="'small'"
                    [inline]="true"
                    (onClick)="onSubmit()"
          >
            Submit
          </a>
          <a Button
             style="margin-left: 2.5px;"
             [size]="'small'"
             [inline]="true"
             (onClick)="onReset()"
          >
            Reset
          </a>
        </ListItem>
      </List>
    </form>
    <ng-template #_switch>
      <Switch class='oneui-mobile' [checked] = "true" (onChange)='switchCheck($event)'></Switch>
    </ng-template>
    <ng-template #_stepper>
      <Stepper [value]="stepper_value"
               [min]="1"
               [showNumber]="true"
               (onChange)="setpperChange($event)"
      ></Stepper>
    </ng-template>
  `,
  styles: [
      /deep/ .my-list .spe .am-list-extra {
        flex-basis: initial;
      }
    `
  ]
})
export class DemoListFormComponent implements OnInit {
  renderFooter: Function;
  registerForm: FormGroup;
  stepper_value: number = 20;
  isError: boolean = false;
  onFocus: object = {
    focus: false
  };
  formErrors: any = {
    username: '',
    password: ''
  };
  formData: any = {
    username: '',
    password: ''
  };
  validationMessage: any = {
    username: {
      minlength: 'At least four characters for account',
      maxlength: 'At most ten characters for account',
      required: 'username requied'
    },
    password: {}
  };
  constructor() {}
  renderHeader() {
    return 'Form Validation';
  }
  bindRenderFooter() {
    return (this.formErrors && this.formErrors['username']) || '';
  }
  onClick() {
    console.log('click');
  }
  buildForm(): void {
    this.registerForm = new FormGroup({
      username: new FormControl(this.formData.username, [
        Validators.required,
        Validators.maxLength(10),
        Validators.minLength(5)
      ]),
      password: new FormControl(this.formData.password, [])
    });
    this.registerForm.valueChanges.subscribe(data => this.onValueChanged(data));
    this.onValueChanged();
  }
  onValueChanged(data?: any) {
    if (!this.registerForm) {
      return;
    }
    const form = this.registerForm;
    for (const field in this.formErrors) {
      this.formErrors[field] = '';
      const control = form.get(field);
      if (control && control.dirty && !control.valid) {
        const messages = this.validationMessage[field];
        for (const key in control.errors) {
        }
      }
    }
  }
  beforeSubmit() {
    const form = this.registerForm;
    for (const field in this.formErrors) {
      this.formErrors[field] = '';
      const control = form.get(field);
      if (control && !control.valid) {
        const messages = this.validationMessage[field];
        for (const key in control.errors) {
          if (field === 'username') {
            this.onFocus = {
              focus: true
            };
          }
        }
        return false;
      } else {
        return true;
      }
    }
  }
  switchCheck(value) {
    console.log('switch status:', value);
  }
  onSubmit() {
    if (this.beforeSubmit()) {
      console.log(this.registerForm.value);
      this.onReset();
    } else {
      alert('Validation failed');
    }
  }
  onReset() {
    this.registerForm.reset();
    this.formData = {
      ...{
        username: '',
        password: ''
      }
    };
    this.isError = false;
  }
  afterChange(event) {
    console.log(event, 'afterChange');
  }
  inputErrorClick(e) {
    alert('At least four charactors for account');
  }
  inputChange(e) {
    if (e.replace(/\s/g, '').length < 5 && e.replace(/\s/g, '').length > 0) {
      this.isError = true;
    } else {
      this.isError = false;
    }
    this.formData.username = e;
  }
  setpperChange($event) {
    console.log($event, 'change');
  }
  ngOnInit() {
    this.buildForm();
    this.renderFooter = this.bindRenderFooter.bind(this);
}

API