angular的表单

全屏功能

fullScreen(){
        this.is_full_screen=document['fullscreenElement'] || document['msFullscreenElement'] || document['mozFullScreenElement'] ||  document['webkitFullscreenElement'] || false;
        if (!this.is_full_screen) {
            const docElmWithBrowsersFullScreenFunctions = document.documentElement as HTMLElement & {
              mozRequestFullScreen(): Promise<void>;
              webkitRequestFullscreen(): Promise<void>;
              msRequestFullscreen(): Promise<void>;
            };
      
            if (docElmWithBrowsersFullScreenFunctions.requestFullscreen) {
              docElmWithBrowsersFullScreenFunctions.requestFullscreen();
            } else if (docElmWithBrowsersFullScreenFunctions.mozRequestFullScreen) { /* Firefox */
              docElmWithBrowsersFullScreenFunctions.mozRequestFullScreen();
            } else if (docElmWithBrowsersFullScreenFunctions.webkitRequestFullscreen) { /* Chrome, Safari and Opera */
              docElmWithBrowsersFullScreenFunctions.webkitRequestFullscreen();
            } else if (docElmWithBrowsersFullScreenFunctions.msRequestFullscreen) { /* IE/Edge */
              docElmWithBrowsersFullScreenFunctions.msRequestFullscreen();
            }
            this.is_full_screen = true;
          } else {
            const docWithBrowsersExitFunctions = document as Document & {
              mozCancelFullScreen(): Promise<void>;
              webkitExitFullscreen(): Promise<void>;
              msExitFullscreen(): Promise<void>;
            };
            if (docWithBrowsersExitFunctions.exitFullscreen) {
              docWithBrowsersExitFunctions.exitFullscreen();
            } else if (docWithBrowsersExitFunctions.mozCancelFullScreen) { /* Firefox */
              docWithBrowsersExitFunctions.mozCancelFullScreen();
            } else if (docWithBrowsersExitFunctions.webkitExitFullscreen) { /* Chrome, Safari and Opera */
              docWithBrowsersExitFunctions.webkitExitFullscreen();
            } else if (docWithBrowsersExitFunctions.msExitFullscreen) { /* IE/Edge */
              docWithBrowsersExitFunctions.msExitFullscreen();
            }
            this.is_full_screen = false;
          }
    }

表单

（1）模板驱动式

1.导入FormsModule

（2）响应式

2.导入ReactiveFormsModule
（1）FormControl
（2）FormGroup----一组FormControl

<form novalidate [formGroup]="myGroup" (ngSubmit)="onSubmit()" >
  Name: <input type="text" formControlName="name">
  Sex: <input type="text" formControlName="sex">
  <div formGroupName="account">
    <label>
      <span>Email address</span>
      <input
        type="email"
        placeholder="Your email address"
        formControlName="email">
    </label>
    <label>
      <span>Confirm address</span>
      <input
        type="email"
        placeholder="Confirm your email address"
        formControlName="confirm">
    </label>
  </div>
  <button type="submit">Sign up</button>
</form>
ngOnInit() {
  this.myGroup = new FormGroup({
    name: new FormControl('zzz'),
    sex: new FormControl('女'),
    account: new FormGroup({
        email: new FormControl(''),
        confirm: new FormControl('')
      })
  });
}
onSubmit() {
    console.log(this.myGroup .value, this.myGroup .valid);
  }

添加验证-----从 @angular/forms 中导入 Validators

ngOnInit() {
  this.myGroup= new FormGroup({
    	name: new FormControl('', [Validators.required, Validators.minLength(2)]),
    	account: new FormGroup({
      	email: new FormControl('', Validators.required),
      	confirm: new FormControl('', Validators.required)
    })
  });
}

获取错误

{{ myGroup.get('name').errors | json }}

（3）FormBuilder

import { FormBuilder, FormGroup, Validators } from '@angular/forms';
constructor(private fb: FormBuilder) {}
ngOnInit() {
  this.myGroup= this.fb.group({
    	name: ['', [Validators.required, Validators.minLength(2)]],
    	account: this.fb.group({
      	email: ['', Validators.required],
      	confirm: ['', Validators.required]
    })
  });
}

注意：

（1）
#name- 指向 input 表单控件
#name=“ngModel” - 指向 NgModel 实例
（2）表单状态
valid - 表单控件有效
invalid - 表单控件无效
pristine - 表单控件值未改变
dirty - 表单控件值已改变
touched - 表单控件已被访问过
untouched - 表单控件未被访问过