Angular表单中的FormControl、FormGroup、FormBuilder、FormArray
Angular表单中的FormControl、FormGroup、FormBuilder、FormArray
要使用响应式表单,首先需要在@angular/forms包中导入ReactiveFormsModule,并把它放到ngModule的imports数组中去。
login.module.ts
import { ReactiveFormsModule } from '@angular/forms';@NgModule({imports: [ReactiveFormsModule, //<==CommonModule],...
})
1 FormControl
FormControl是为单个表单控件提供支持的类,它是Angular表单中的最基本的构造块
FormControl封装了这些字段的值和状态,比如是否有效、是否脏(被修改过)或是否有错误等。还提供了一系列公共API。
1.1 构造函数
创建新的FormControl示例。
constructor(formState: any = null, validatorOrOpts?: ValidatorFn | AbstractControlOptions | ValidatorFn[], asyncValidator?: AsyncValidatorFn | AsyncValidatorFn[])
参数 | 数据类型 | 说明 |
---|---|---|
formState | any | 使用一个初始值或定义了初始值和禁用状态的对象初始化该控件。可选,默认值为null |
validatorOrOpts | ValidatorFn或AbstractControlOptions或ValidatorFn[] | 一个同步验证器函数或其数组,或者一个包含验证函数和验证触发器的AbstractControlOptions对象。可选,默认值为undefined |
asyncValidator | AsyncValidatorFn或AsyncValidatorFn[] | 一个异步验证器函数或其数组。可选,默认值为undefined |
具体示例如下。
1.1.1 用一个初始值初始化FormControl
const control = new FormControl('somevalue');
console.log(control.value); //'some value'
1.1.2 用一个表单状态对象初始化控件
这里用到的是value和disabled键
const control = new FormControl({value:'n/a',disabled:true});
console.log(control.value); //'n/a'
console.log(control.status); //'DISABLED'
具体使用示例如下。
login.component.html
<div><label>Name:</label><input type="text" [formControl]="username">
</div>
<div><label>Password:</label><input type="password" [formControl]="password">
</div>
<button type="submit" (click)="onSubmit()">登录</button>
login.conponent.ts
import { FormControl } from '@angular/forms';
import { Component } from '@angular/core';@Component({selector: 'app-login',templateUrl: './login.component.html',styleUrls: ['./login.component.css']
})
export class LoginComponent {username:FormControl = new FormControl('Tom');password:FormControl = new FormControl();onSubmit() {console.log(this.username.value, this.password.value);}
}
- formControl是一个指令,它接收一个FormControl的实例,来管理表单元素。
- 构造FormControl的实例时,第一个参数是表单元素的初始值,也可传入一个对象{value:‘Tom’,disabled:true},里面可以包含表单元素的状态,如是否禁用等。
- 在提交时,可以通过this.name.value获取表单元素的值。
- 当我们需要在元素值改变时做一些事情,可以订阅对应控件的valueChanges事件。
this.name.valueChanges.subscribe(() => {// do something...console.log(this.name);
});
1.1.3 用一个同步验证器初始化控件
const control = new FormControl('',Validators.required);
console.log(control.value); //''
console.log(control.status); //'INVALID'
具体使用示例如下。
password.validator.ts
export const PasswordValidator = (password?:RegExp): ValidatorFn => {return (control:AbstractControl): {[key: string]: any} => {let error = null;if (password && !password.test(control.value)) {error = {password:control.value}}return error;}
}
login.component.html
<div><label>Password:</label><input type="password" [formControl]="password"><div [style.color]="'red'" *ngIf="password.invalid && (password.touched || password.dirty)"><p *ngIf="password.errors.required">password can not be empty!</p><p *ngIf="password.errors.password">password is illegal!</p></div>
</div>
login.component.ts
password:FormControl = new FormControl('', [Validators.required, PasswordValidator()]);
- FormControl的第二个参数可以传入一个ValidatorFn对象或者一个包含ValidatorFn对象的数组。
- angular2内置的验证器可以通过Validators取到,如:Validators.required。
- 自定义的验证器只需引用我们在模板驱动型表单中构造的验证器工厂函数(PasswordValidator)生成一个ValidatorFn对象的实例即可。
- FormControl上包含了表单的验证信息,在模板中可以直接使用它。
1.1.4 用一个配置对象初始化控件
const control = new FormControl('',{
validators:Validators.required,
asyncValidators:myAsyncValidator
});
给FormControl添加异步验证器的具体示例如下。
username.validator.ts
const usernameList = ['jack','rose','amy','tom'
];export const checkNameValidator = () => {return (control:AbstractControl) => new Promise((resolve, reject) => {setTimeout(() => {if (usernameList.indexOf(control.value) >= 0) {resolve({'checkName':control.value});} else {resolve(null);}}, 2000)});
}
login.component.html
<label>Name:</label><input type="text" [formControl]="username"><div [style.color]="'red'" *ngIf="username.invalid && (username.touched || username.dirty)"><p *ngIf="username.errors.required">UserName can not be empty!</p><p *ngIf="username.errors.checkName">UserName is exist!</p></div>
login.component.ts
username:FormControl = new FormControl('jack', Validators.required, checkNameValidator());
- FormControl的第三个参数可以传入一个AsyncValidatorFn对象或者一个包含AsyncValidatorFn对象的数组。
- 异步验证器只需引用我们在模板驱动型表单中构造的验证器工厂函数(checkNameValidator )生成一个AsyncValidatorFn对象的实例即可。
1.1.5 配置该控件,使其在blur事件时更新
把updateOn选项设置为’blur’,可以在发生blur事件时更新。
const control = new FormControl('',{updateOn:'blur'});
1.1.6 配置该控件,使其在发生submit事件时更新
把updateOn选项设置为’submit’,可以在发生submit事件时更新
const control = new FormControl('',{updateOn:'submit'});
1.2 方法
1.2.1 setvalue()
设置该表单控件的新值
setValue(value: any, options: { onlySelf?: boolean; emitEvent?: boolean; emitModelToViewChange?: boolean; emitViewToModelChange?: boolean; } = {}): void
参数 | 数据类型 | 说明 |
---|---|---|
value | any | 控件的新值 |
options | object | 当值发生变化时,该配置项决定如何传播变更以及发出事件。该配置项会传递给updateVauleAndValidity方法。可选,默认值是{} |
options中具体的属性有:
- onlySelf:如果为true,则每次变更只影响该控件本身,不影响其父控件。默认为false。
- emitEvent:如果为true或未提供(默认),则当控件值变化时,statusChanges和valueChanges这两个Observable都会以最近的状态和值发出事件。如果为false,则不会发出事件。
- emitModelToViewChange:如果为true或未提供(默认),则每次都会触发一个onChange事件以更新视图。
- emitViewToModelChange:如果为true或未提供(默认),则每次变化都会触发一个ngModelChange事件以更新模型。
1.2.2 patchValue()
修补控件的值。在FormControl这个层次上,该函数的功能和setValue完全相同。但在FormGroup和FormArray上的patchValue则有不同的行为。
patchValue(value: any, options: { onlySelf?: boolean; emitEvent?: boolean; emitModelToViewChange?: boolean; emitViewToModelChange?: boolean; } = {}): void
参数 | 数据类型 | 说明 |
---|---|---|
value | any | |
options | object | 可选,默认值是{} |
1.2.3 reset()
重置该表单控件,把它标记为pristine和untouched,并把它的值设置为null。
reset(formState: any = null, options: { onlySelf?: boolean; emitEvent?: boolean; } = {}): void
参数 | 数据类型 | 说明 |
---|---|---|
formState | any | 使用初始值或一个包含初始值和禁用状态的对象来重置该组件。可选,默认值是null |
options | object | 当值发生变化时,该配置项会决定控件如何传播变更以及发出事件。可选,默认值是{} |
options中具体的属性有:
- onlySelf:如果为true,则每次变更只影响该控件本身,不影响其父控件。默认为false。
- emitEvent:如果为true或未提供(默认),则当控件值变化时,statusChanges和valueChanges这两个Observable都会以最近的状态和值发出事件。如果为false,则不会发出事件。
1.2.3.1 把控件重置为初始值
通过传递包含值和禁用状态的独立值或表单状态对象,可以将其重置为特定的表单状态(这是所支持的禁用的两个非计算状态)。
const control = new FormControl('Nancy');
console.log(control.value); //'Nancy'
control.reset('Drew');
console.log(control.value); //'Drew'
1.2.3.2 把控件重置回初始值并禁用
const control = new FormControl('Nancy');
console.log(control.value); //'Nancy'
console.log(control.status); //'VALID'control.reset({value:'Drew',disabled:true});
console.log(control.value); //'Drew'
console.log(control.status); //'DISABLED'
1.2.4 registerOnChange()
注册变更事件的监听器
registerOnChange(fn: Function): void
参数 | 数据类型 | 说明 |
---|---|---|
fn | Function | 当值变化时,就会调用该方法 |
1.2.5 registerOnDisabledChange()
注册禁用事件的监听器
registerOnDisabledChange(fn: (isDisabled: boolean) => void): void
参数 | 数据类型 | 说明 |
---|---|---|
fn | (isDisabled: boolean) => void | 当禁用状态发生变化时,就会调用该方法 |
2 FormGroup
FormGroup中包含一组FormControl实例,用来管理多个FormControl。它将每个子FormControl的值聚合进一个对象,它的key是每个控件的名字,可以跟踪FormControl组的值和验证状态。FormGroup的状态是归集的所有子控件的状态值计算出来的。
2.1 构造函数
创建一个新的FormGroup实例。
constructor(controls: { [key: string]: AbstractControl; }, validatorOrOpts?: ValidatorFn | AbstractControlOptions | ValidatorFn[], asyncValidator?: AsyncValidatorFn | AsyncValidatorFn[])
参数 | 数据类型 | 说明 |
---|---|---|
controls | object | 一组子控件。每个子控件的名字就是它注册时用的key |
validatorOrOpts | ValidatorFn或AbstractControlOptions或ValidatorFn[] | 一个同步验证器函数或其数组,或者一个包含验证函数和验证触发器的AbstractControlOptions对象。可选,默认值是undefined |
asyncValidator | AsyncValidatorFn或AsyncValidatorFn[] | 单个的异步验证器函数或其数组。可选,默认值是undefined |
2.1.1 创建一个带有两个控件的表单组
const form = new FormGroup({first:new FormControl('Nancy',Validators.minLength(2),last:new FormControl('Drew')),
});console.log(form.value); //{first:'Nancy',last:'Drew'}
console.log(form.status); //'VALID'
2.1.2 创建一个具有组级验证器的表单组
当你要根据一个以上子控件的值来决定有效性时,可用第二个参数传入一些组级验证器或用第三个参数传入一些组级异步验证器。
const form = new FormGroup({password: new FormControl('', Validators.minLength(2)),passwordConfirm: new FormControl('', Validators.minLength(2)),
}, passwordMatchValidator);function passwordMatchValidator(g: FormGroup) {return g.get('password').value === g.get('passwordConfirm').value? null : {'mismatch': true};
}
像FormControl实例一样,你也可以在配置对象中传入验证器和异步验证器。
const form = new FormGroup({password: new FormControl('')passwordConfirm: new FormControl('')
}, { validators: passwordMatchValidator, asyncValidators: otherValidator });
2.1.3 为表单组中的所有空间设置updateOn属性
该选项对象可用来为每个子控件的updateOn属性设置默认值。如果在组级把updateOn设置为’blur’,则所有子控件的默认值也是’blur’,除非这个子控件显式的指令了另一个updateOn值。
const c = new FormGroup({one:new FromControl()},{updateOn:'blur'});
2.2 属性
属性 | 说明 |
---|---|
controls: {[key: string]: AbstractControl;} | 一组子控件。每个子控件的名字就是它注册时用的key |
2.3 方法
2.3.1 registerControl()
向组内的控件列表中注册一个控件,该方法不会更新控件的值或其有效性。
registerControl(name: string, control: AbstractControl): AbstractControl
参数 | 数据类型 | 说明 |
---|---|---|
name | string | 注册到集合中的控件名 |
control | AbstractControl | 提供这个名字对应的控件 |
2.3.2 addControl()
往组内添加一个控件,该方法还会更新控件内值和有效性
addControl(name: string, control: AbstractControl): void
参数 | 数据类型 | 说明 |
---|---|---|
name | string | 注册到集合中的控件名 |
control | AbstractControl | 提供这个名字对应的控件 |
2.3.3 removeControl()
从该组中移除一个控件
removeControl(name: string): void
参数 | 数据类型 | 说明 |
---|---|---|
name | string | 要从集合中移除的控件名 |
2.3.4 setControl()
替换现有控件
setControl(name: string, control: AbstractControl): void
参数 | 数据类型 | 说明 |
---|---|---|
name | string | 要从集合中替换掉的控件名 |
control | AbstractControl | 提供具有指定名称的控件 |
2.3.5 contains()
检查组内是否具有一个指定名字的已启用的控件。对于已禁用的控件返回false,否则返回true。如果你只想检查它是否存在于该组中,请改用get代替。
contains(controlName: string): boolean
参数 | 数据类型 | 说明 |
---|---|---|
controlName | string | 要在集合中检查是否存在的控件名 |
2.3.6 setValue()
设置此FormGroup的值。它接受一个与组结构对应的对象,以控件名作为key。它会进行严格的检查,当设置了不存在或被排出去的控件的值时会失败。
setValue(value: { [key: string]: any; }, options: { onlySelf?: boolean; emitEvent?: boolean; } = {}): void
参数 | 数据类型 | 说明 |
---|---|---|
value | object | 控件的新值,其结构必须和该组的结构相匹配 |
options | object | 当值变化时,此配置项会决定该控件会如何让传播变更以及发出时间。该配置项会被传给updateValueAndValidity方法。可选,默认值是{} |
options的具体参数为:
- onlySelf:如果为true,则每个变更仅仅影响当前控件,而不会影响父控件。默认为false。
- emitEvent:如果为true会未提供(默认),则当控件值发生变化时,statusChanges和valueChanges这两个Observable分别会以最近的状态和值发出事件。如果为false则不发出事件。
设置表单的完整值
const form = new FormGroup({first:new FormControl(),last:new FormControl()
});console.log(form.value); //{first:null,last:null}form.setValue({first:'Nancy',last:'Drew'});
console.log(form.value); //{first:'Nancy',last:'Drew'}
2.3.7 patchValue()
修补此FormGroup的值。它接受一个以控件名为key的对象,并尽量把它们的值匹配到组中正确的控件上,它只会替换表单模型中修改过的那些属性。它能接受组的超集和子集而不会抛出错误。
patchValue(value: { [key: string]: any; }, options: { onlySelf?: boolean; emitEvent?: boolean; } = {}): void
参数 | 数据类型 | 说明 |
---|---|---|
value | object | 与该组的结构匹配的对象 |
options | object | 在修补了该值之后,此配置项会决定控件如何传播变更以及发出事件。该配置项会被传给updateValueAndValidity方法。可选,默认值为{} |
options的具体参数为:
- onlySelf:如果为true,则每个变更仅仅影响当前控件,而不会影响父控件。默认为false。
- emitEvent:如果为true会未提供(默认),则当控件值发生变化时,statusChanges和valueChanges这两个Observable分别会以最近的状态和值发出事件。如果为false则不发出事件。
修补表单组的值
const form = new FormGroup({first:new FormControl(),last:new FormControl()
});console.log(form.value); //{first:null,last:null}form.setValue({first:'Nancy'});
console.log(form.value); //{first:'Nancy',last:null}
2.3.8 reset()
重置这个FormGroup,把它的各级子控件都标记为pristine和untouched,并把它们的值都设置为null。
也可以传入一个与表单结构相匹配的以控件名为key的Map,来把表单重置为特定的状态。其状态可以是一个单独的值,也可以是一个同时具有值和禁用状态的表单状态对象。
reset(value: any = {}, options: { onlySelf?: boolean; emitEvent?: boolean; } = {}): void
参数 | 数据类型 | 说明 |
---|---|---|
value | any | 使用一个初始值或包含初始值与禁用状态的对象重置该控件。可选,默认值是{} |
options | object | 当该组被重置时,此配置项会决定控件如何传播变更以及发出事件。该配置项会被传给updateValueAndValidity方法。可选,默认值为{} |
options的具体参数为:
- onlySelf:如果为true,则每个变更仅仅影响当前控件,而不会影响父控件。默认为false。
- emitEvent:如果为true会未提供(默认),则当控件值发生变化时,statusChanges和valueChanges这两个Observable分别会以最近的状态和值发出事件。如果为false则不发出事件。
重置该表单组的值
const form = new FormGroup({first:new FormControl('first name'),last:new FormControl('last name')
});console.log(form.value); //{first:'first name',last:'last name'}form.reset({first:'name',last:'last name'});
console.log(form.value); //{first:'name',last:'last name'}
重置该表单组的值以及禁用状态
const form = new FormGroup({first:new FormControl('first name'),last:new FormControl('last name')
});console.log(form.value); //{first:'first name',last:'last name'}form.reset({first:{value:'name',disabled:true},last:'last'});
console.log(form.value); //{first:'name',last:'last name'}
//代码示例来自官方文档,此处不清楚为何未重置成功,可能是两个表单状态格式要书写一致console.log(this.form.get('first'.status)); //'DISABLED'
2.3.9 getRawValue()
这个FormGroup的聚合值,包括所有已禁用的控件。获取所有控件的值而不管其禁用状态。用value属性获取组中的值时,会从FormGroup中排除所有已禁用的控件。
getRawValue(): any[]
2.4 具体使用示例
login-component.html
<div [formGroup]="info"><div><label>Name:</label><input type="text" formControlName="username"><div [style.color]="'red'" *ngIf="info.get('username').invalid && (info.get('username').touched || info.get('username').dirty)"><p *ngIf="info.get('username').errors.required">UserName can not be empty!</p><p *ngIf="info.get('username').errors.checkName">UserName is exist!</p></div></div><div><label>Password:</label><input type="password" formControlName="password"><div [style.color]="'red'" *ngIf="info.get('password').invalid && (info.get('password').touched || info.get('password').dirty)"><p *ngIf="info.get('password').errors.required">password can not be empty!</p><p *ngIf="info.get('password').errors.password">password is illegal!</p></div></div><button type="submit" (click)="onSubmit()">Submit</button>
</div>
login.component.ts
import { checkNameValidator } from '../validators/username.validator';
import { PasswordValidator } from '../validators/password.validator';
import { FormControl, FormGroup, Validator, Validators } from '@angular/forms';
import { Component } from '@angular/core';@Component({selector: 'app-login',templateUrl: './login.component.html',styleUrls: ['./login.component.css']
})
export class LoginComponent {info:FormGroup = new FormGroup({username:new FormControl('jack', Validators.required, checkNameValidator()),password:new FormControl('', [Validators.required, PasswordValidator()])});onSubmit() {console.log(this.info.value);}
}
- 构造FormGroup需传入一个包含有FormControl实例的对象。
- 在模板中可以通过[formGroup]="info"指令,管理一个表单组。
- 在包含有formGroup指令的元素的子节点上,可以使用formControlName="name"代替[formControl]="name"来控制表单元素,formControlName指令只能在formGroup指令内部使用。
- 在FormGroup上可以通过info.get(‘name’)获取FormControl实例。
- 在FormGroup上可以通过this.info.value获取表单组的值。
- 在FormGroup上可以通过this.info.setValue(newValue)或this.info.patchValue(newValue)设置FormGroup的值,setValue是修改整个FormGroup的值,传入的值必须包含全部的属性,缺少任意一个属性控制台会报错,用patchValue时,可修改部分属性的值。
- FormGroup内部可以嵌套FormGroup,如Name可能又包含firstName和lastName,此时我们可以构造嵌套的FormGroup。
<div formGroupName="name"><input type="text" formControlName="first"><input type="text" formControlName="last">
</div>
info:FormGroup = new FormGroup({name: new FormGroup({first:new FormControl(),last:new FormControl()})
});
3 FormArray
跟踪每一个控件数组的值和有效特性,控件可以是FormControl、FormGroup或FormArray的实例。它聚合了数组中每个表单控件的值,还会根据其所有子控件的状态总结出自己的状态。
3.1 构造函数
创建一个新的 FormArray 实例
constructor(controls: AbstractControl[], validatorOrOpts?: ValidatorFn | AbstractControlOptions | ValidatorFn[], asyncValidator?: AsyncValidatorFn | AsyncValidatorFn[])
参数 | 数据类型 | 说明 |
---|---|---|
controls | AbstractControl[] | 一个子控件数组。在注册后,每个子控件都会有一个指定的索引。 |
validatorOrOpts | ValidatorFn或AbstractControlOptions或ValidatorFn[] | 一个同步验证器函数或其数组,或者一个包含验证函数和验证触发器的 AbstractControlOptions 对象。可选, 默认值是 undefined |
asyncValidator | AsyncValidatorFn或AsyncValidatorFn[] | 单个的异步验证器函数或其数组。可选,默认值是 undefined |
3.1.1创建表单控件的数组
const arr = new FormArray([new FormControl('Nancy', Validators.minLength(2)),new FormControl('Drew'),
]);console.log(arr.value); //['Nancy', 'Drew']
console.log(arr.status); //'VALID'
3.1.2 创建一个带有数组级验证器的表单数组
你可以定义数组级的验证器和异步验证器。当你需要根据一个或多个子控件的值来进行有效性验证时,这很有用。
这两种类型的验证器分别通过第二个和第三个参数或作为配置对象的一部分传进去。
const arr = new FormArray([new FormControl('Nancy'),new FormControl('Drew')
], {validators: myValidator, asyncValidators: myAsyncValidator});
3.1.3 为表单数组中的所有控件设置 updateOn 属性
该配置对象可以为每个子控件的updateOn属性设置默认值。如果在数组级把 updateOn 设置为’blur’,则所有子控件的默认值也是’blur’,除非这个子控件显式的指定了另一个 updateOn 值。
const arr = new FormArray([new FormControl()
], {updateOn: 'blur'});
3.1.4 从表单数组中添加或删除控件
要改变数组中的控件列表,可以使用FormArray本身的push、insert、removeAt 或 clear方法。这些方法能确保表单数组正确的跟踪这些子控件。不要直接修改实例化 FormArray 时传入的那个 AbstractControl 数组,否则会导致奇怪的、非预期的行为,比如破坏变更检测机制。
3.2 属性
属性 | 数据类型 | 说明 |
---|---|---|
controls | AbstractControl[] | 一个子控件数组。在注册后,每个子控件都会有一个指定的索引。 |
length | number | 控件数组的长度。 |
3.3 方法
3.3.1 at()
获取数组中指定index处的AbstractControl。
at(index: number): AbstractControl
参数 | 数据类型 | 说明 |
---|---|---|
index | number | 要获取的控件在数组中的索引 |
3.3.2 push()
在数组的末尾插入一个新的 AbstractControl。
push(control: AbstractControl): void
参数 | 数据类型 | 说明 |
---|---|---|
control | AbstractControl | 要插入的表单控件 |
3.3.3 insert()
在数组中的指定index处插入一个新的 AbstractControl。
insert(index: number, control: AbstractControl): void
参数 | 数据类型 | 说明 |
---|---|---|
index | number | 要插入该控件的索引序号 |
control | AbstractControl | 要插入的表单控件 |
3.3.4 removeAt()
移除数组中指定index处的AbstractControl。
removeAt(index: number): AbstractControl
参数 | 数据类型 | 说明 |
---|---|---|
index | number | 要移除的控件在数组中的索引 |
3.3.5 setControl()
在数组中的指定index处将现有的控件替换成一个新的AbstractControl。
setControl(index: number, control: AbstractControl): void
参数 | 数据类型 | 说明 |
---|---|---|
index | number | 要替换的控件在数组中的索引 |
control | AbstractControl | 要用来替换现有控件的控件 |
3.3.6 setValue()
设置此FormArray的值。它接受一个与组结构对应的对象,以控件名作为key。它会进行严格的检查,当设置了不存在或被排出去的控件的值时会失败。
setValue(value: any[], options: { onlySelf?: boolean; emitEvent?: boolean; } = {}): void
参数 | 数据类型 | 说明 |
---|---|---|
value | any[] | 要传给这些控件的值的数组 |
options | object | 当值变化时,此配置项会决定该控件会如何让传播变更以及发出时间。该配置项会被传给updateValueAndValidity方法。可选,默认值是{} |
options的具体参数为:
- onlySelf:如果为true,则每个变更仅仅影响当前控件,而不会影响父控件。默认为false。
- emitEvent:如果为true会未提供(默认),则当控件值发生变化时,statusChanges和valueChanges这两个Observable分别会以最近的状态和值发出事件。如果为false则不发出事件。
设置表单的完整值
const arr = new FormArray({new FormControl(),new FormControl()
});console.log(arr.value); //[null,null]arr.setValue(['Nancy','Drew']);
console.log(form.value); //['Nancy','Drew']
3.3.7 patchValue()
修补此FormArray的值。它接受一个以控件名为key的对象,并尽量把它们的值匹配到组中正确的控件上,它只会替换表单模型中修改过的那些属性。它能接受组的超集和子集而不会抛出错误。
patchValue(value: any[], options: { onlySelf?: boolean; emitEvent?: boolean; } = {}): void
参数 | 数据类型 | 说明 |
---|---|---|
value | any[] | 由各个控件的值组成的数组 |
options | object | 在修补了该值之后,此配置项会决定控件如何传播变更以及发出事件。该配置项会被传给updateValueAndValidity方法。可选,默认值为{} |
options的具体参数为:
- onlySelf:如果为true,则每个变更仅仅影响当前控件,而不会影响父控件。默认为false。
- emitEvent:如果为true会未提供(默认),则当控件值发生变化时,statusChanges和valueChanges这两个Observable分别会以最近的状态和值发出事件。如果为false则不发出事件。
修补表单组中各个控件的值
const arr = new FormArray({new FormControl(),new FormControl()
});console.log(arr.value); //[null,null]arr.patchValue(['Nancy']);
console.log(form.value); //['Nancy',null]
3.3.8 reset()
重置这个FormArray,把它的各级子控件都标记为pristine和untouched,并把它们的值都设置为null。
也可以传入一个与表单结构相匹配的状态数组,来把表单重置为特定的状态。每个状态可以是一个单独的值,也可以是一个同时具有值和禁用状态的表单状态对象。
reset(value: any = {}, options: { onlySelf?: boolean; emitEvent?: boolean; } = {}): void
参数 | 数据类型 | 说明 |
---|---|---|
value | any | 各控件值的数组。可选,默认值是[] |
options | object | 当该组被重置时,此配置项会决定控件如何传播变更以及发出事件。该配置项会被传给updateValueAndValidity方法。可选,默认值为{} |
options的具体参数为:
- onlySelf:如果为true,则每个变更仅仅影响当前控件,而不会影响父控件。默认为false。
- emitEvent:如果为true会未提供(默认),则当控件值发生变化时,statusChanges和valueChanges这两个Observable分别会以最近的状态和值发出事件。如果为false则不发出事件。
重置该表单组的值
const arr = new FormArray({new FormControl(),new FormControl()
});arr.reset(['name','last name']);
console.log(form.value); //['name','last name']
重置表单数组中的各个值和第一个控件的禁用状态
this.arr.reset([{value: 'name', disabled: true},'last'
]);console.log(this.arr.value); // ['name', 'last name']
//代码示例来自官方文档,此处不清楚为何未重置成功,可能是两个表单状态格式要书写一致console.log(this.arr.get('first'.status)); //'DISABLED'
3.3.9 getRawValue()
这个FormArray的聚合值,包括所有已禁用的控件。获取所有控件的值而不管其禁用状态。用value属性获取组中的值时,会从FormGroup中排除所有已禁用的控件。
getRawValue(): any[]
3.3.10 clear()
移除FormArray中所有的控件
gclear(): void
移除表单组中所有元素
const arr = new FormArray([new FormControl(),new FormControl()
]);
console.log(arr.length); // 2arr.clear();
console.log(arr.length); // 0
相比一个一个删除元素,这是一种更简单更有效的替代方法
const arr = new FormArray([new FormControl(),new FormControl()
]);while (arr.length) {arr.removeAt(0);
}
3.4 具体示例
address.component.html
<div [formGroup]="info"><div><div>Address</div><div><button (click)="addAddress()">Add</button></div><div *ngFor="let address of info.get('address').controls;let index=index"><p>Provience:<input [formControl]="address.get('provience')">City:<input [formControl]="address.get('city')"><button (click)="removeAddress(index)">Remove</button></p></div></div>
</div>
<button (click)="getInfo()">Get Info</button>
address.component.ts
import { FormArray, FormBuilder, FormControl, FormGroup } from '@angular/forms';
import { Component, OnInit } from '@angular/core';@Component({selector: 'app-address',templateUrl: './address.component.html',styleUrls: ['./address.component.css']
})
export class AddressComponent{address:FormArray;info:FormGroup;constructor(private fb:FormBuilder) {this.createForm();}//初始化表单createForm() {this.address = this.fb.array([]);this.info = this.fb.group({address:this.address});}//添加地址addAddress() {this.address.push(new FormGroup({provience:new FormControl(),city:new FormControl()}));}//移除地址removeAddress(index) {this.address.removeAt(index);}//获取表单值getInfo() {console.log(this.info.value);}
}
4 FormBuilder
使用用户指定的配置创建AbstractControl。它提供了一个语法糖,用来简化FormControl、FormGroup 或 FormArray 实例的创建过程。它会减少构建复杂表单时所需的样板代码的数量。
4.1 方法
4.1.1 group()
构建一个新的FormGroup实例。
group(controlsConfig: { [key: string]: any; }, options: AbstractControlOptions | { [key: string]: any; } = null): FormGroup
参数 | 数据类型 | 说明 |
---|---|---|
controlsConfig | object | 一组子控件。每个 key 就是注册进来的控件的名字。 |
options | AbstractControlOptions或{ [key: string]: any; } | FormGroup 的配置项对象。可选,默认值为null |
FormGroup 的配置项对象有两种形态。
(1) AbstractControlOptions对象(首选),它包括如下属性:
- validators:一个同步验证器函数或其数组
- asyncValidators:一个异步验证器函数或其数组
- updateOn:当发生哪个事件时该控件要被更新(选项)‘change’ | ‘blur’ | submit’
(2) 传统的配置对象,它包括如下属性:
- validator:一个同步验证器函数或其数组
- asyncValidator:一个异步验证器函数或其数组
4.1.2 control()
构建一个新的FormControl实例。
control(formState: any, validatorOrOpts?: ValidatorFn | AbstractControlOptions | ValidatorFn[], asyncValidator?: AsyncValidatorFn | AsyncValidatorFn[]): FormControl
参数 | 数据类型 | 说明 |
---|---|---|
formState | any | 使用一个初始值或定义了初始值和禁用状态的对象初始化该控件。可选,默认值为null |
validatorOrOpts | ValidatorFn或AbstractControlOptions或ValidatorFn[] | 一个同步验证器函数或其数组,或者一个包含验证函数和验证触发器的AbstractControlOptions对象。可选,默认值为undefined |
asyncValidator | AsyncValidatorFn或AsyncValidatorFn[] | 一个异步验证器函数或其数组。可选,默认值为undefined |
*把控件初始化为禁用状态
import {Component, Inject} from '@angular/core';
import {FormBuilder, FormControl, FormGroup, Validators} from '@angular/forms';
/* . . . */
@Component({selector: 'app-disabled-form-control',template: `<input [formControl]="control" placeholder="First">`
})
export class DisabledFormControlComponent {control: FormControl;constructor(private fb: FormBuilder) {this.control = fb.control({value: 'my val', disabled: true});}
}
4.1.3 array()
构建一个新的FormArray实例。
control(formState: any, validatorOrOpts?: ValidatorFn | AbstractControlOptions | ValidatorFn[], asyncValidator?: AsyncValidatorFn | AsyncValidatorFn[]): FormControl
参数 | 数据类型 | 说明 |
---|---|---|
controlsConfig | any[] | 一个子控件数组。每个子控件的 key 都是它在数组中的索引 |
validatorOrOpts | ValidatorFn或AbstractControlOptions或ValidatorFn[] | 一个同步验证器函数或其数组,或者一个包含验证函数和验证触发器的AbstractControlOptions对象。可选,默认值为undefined |
asyncValidator | AsyncValidatorFn或AsyncValidatorFn[] | 一个异步验证器函数或其数组。可选,默认值为undefined |
4.2 具体示例
login.component.ts
import { checkNameValidator } from '../validators/name.validator';
import { PasswordValidator } from '../validators/password.validator';
import { FormBuilder, FormControl, FormGroup, Validator, Validators } from '@angular/forms';
import { Component } from '@angular/core';@Component({selector: 'app-login',templateUrl: './login.component.html',styleUrls: ['./login.component.css']
})
export class LoginFormComponent {info:FormGroup;constructor(private fb:FormBuilder){this.createForm();}createForm() {this.info = this.fb.group({name: ['jack', Validators.required, checkNameValidator()],password: ['', [Validators.required, PasswordValidator()]]});}onSubmit() {console.log(this.info.value);}
}
- 我们需要先在构造函数中注入FormBuilder,最好新建一个方法来初始化表单,这里我们在createForm方法中初始化表单。
- 借助FormBuilder我们可以通过参数来构建表单组,参数的结构与使用new基本一致,就不需要重复的写new FormGroup(…)、new FormControl(…)了。
如若内容造成侵权/违法违规/事实不符,请联系编程学习网邮箱:809451989@qq.com进行投诉反馈,一经查实,立即删除!
相关文章
- Angular表单验证器
为什么使用验证器 用户输入的数据各式各样,并不总是正确的,如果用户输入了错误的数据格式,那么我们希望给他们提供实时正确的反馈,并且阻止表单的提交.因此,我们需要验证器来处理这些情况.表单验证 Angular支持的内置validate属性: required- 设置表单控件值是非空的…...
2024/4/24 1:49:12 - Angular14 Visual Studio Code作为Angular开发工具常用插件安装、json-server安装与使用、angular/cli安装失败问题、emmet安装...
前提准备: 搭建好Angular开发环境 1 安装Visual Studio Code 教程简单,不会的去问度娘 2 安装Chrome浏览器 教程简单,不会的趣闻度娘 3 Visual Studio Code需要安装的插件 3.1 Debugger for Chrome 用于直接在谷歌浏览器中调试Angular应用 3.…...
2024/5/5 12:08:49 - 自定义Angular插件 - 网站用户引导
最近由于项目进行了较大的改版,为了让用户能够适应这次新的改版,因此在系统中引入了“用户引导”功能,对于初次进入系统的用户一些简单的使用培训training。对于大多数网站来说,这是一个很常见的功能。所以在开发这个任务之前&…...
2024/4/21 2:08:36 - Angular8 组件样式不生效引发的思考
背景 从angularjs升级到angular8, 对应ui-grid不支持。 寻找替代方案,入门可以参考。 小插曲 基于组件思想,尝试把组件样式,放到组件同级目录 将ag-grid css样式引入到app.component.scss中,非styles.css中 import "~ag…...
2024/4/30 3:45:29 - angular4的rollup
1、首先得AOT 按照官网的例子 https://www.angular.cn/docs/ts/latest/cookbook/aot-compiler.html 注意 "module": "es2015", 这里一定要es2015不要commonjs 然后配置main.ts,编译成aot方式 js里面是 import { platformBrowser } fro…...
2024/4/22 10:28:56 - Intellij IDEA 中安装Angular 插件方法
1、先下载angular插件 AngularJS-135.831.zip 2、打开Intellij IDEA ,File—〉Settings---〉Plugins 点击“” 点击“”确定。 重新启动Intellij IDEA,在Html文件中输入ng,出现提示,则说明插件安装成功:...
2024/5/5 16:52:27 - 对比angular的几个插件库
2019独角兽企业重金招聘Python工程师标准>>> 目录 1.PrimeNG 2.Material 3.Rebirth NG 4.NG-ZORRO 5.总结 一、PrimeNG 官网连接: https://www.primefaces.org/primeng/#/ 简单介绍: PrimeNG,大而全的一个插件库,提供了…...
2024/5/5 23:44:13 - angular中使用jsencrypt插件
本篇文章给大家介绍一下angular中jsencrypt插件的使用方法。有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助。 相关推荐:《angular教程》 angular使用jsencrypt插件 1.首先在angular项目里边安装jsencrypt模块 npm instal…...
2024/5/5 13:10:15 - angular library 打包 多入口
构建自己的私有library太零散 希望达到想angular那样将相同种类的包放到一个文件夹下 如: zengwe:boundary$ ll node_modules/angular 总用量 48 drwxrwxrwx 1 zengwe zengwe 4096 Dec 6 17:35 animations drwxrwxrwx 1 zengwe zengwe 4096 Dec 6 17:35 cli drw…...
2024/5/1 23:14:53 - angular调试——安装batarang踩到坑儿(浏览器插件没反应)
因为防火墙的原因,chrome是无法直接去Google APP Store获取到batarang插件的。后来,在网上搜了一下,很多都说可以下载一个batarang的后缀名为“.crx”的文件,然后直接拖到chrome的扩展程序那里进行安装即可,可是虽然是…...
2024/4/21 2:08:33 - Angular之编辑器插件
想插入一个编辑器在页面上么?如上图所示,还可以转html哦~是不是很酷?在自己的页面上加上这么一个编辑器,瞬间变身高大上有木有? 只需简单的几步,满足你的需求!! 第一步,…...
2024/4/26 13:41:44 - 使用Angular构建Chrome插件
最近公司有业务需求需要做一个Chrome插件,原本想着用jQuery Bootstarp搞定。 但是由于已经使用Angular已经太久了,重新再用jQuery有点蛋疼。 后面查了一下资料,发现有人用React写过Chrome插件。 仔细看了下,觉得实际上应该是一样…...
2024/4/21 2:08:30 - 基于 Angular 的前端组件化
随着浏览器性能提升,新的技术和形式不断升级,前端开发工程师面对的交互和设计也日趋复杂,开发周期变长,旧有的项目维护困难,与新的功能难以兼容匹配。前端开发者也需要学习和使用传统软件开发的思路和工具。其中组件化…...
2024/5/5 12:58:34 - Angular 日历插件-layDate日期选择插件
第一步:上官网下载独立版本的日期与时间组件文件包:http://www.layui.com/laydate/ 第二步:Angular2.x之后推荐将资源文件放到 src\assets 目录下,所以将下载好的文件 laydate文件夹下的 theme 文件夹和 laydate.js 一起复制&…...
2024/4/21 2:08:28 - angular7中使用ckplayer插件实现各大浏览器视频播放功能
使用原生的video属性,虽然主流浏览器都可以播放,但是在IE中会出现错误:(提示:视频类型不受支持或者文件路径无效) 下载ckplayer.js文件 可以在github或者我的下载资源中下载即可,目录结构如下…...
2024/5/5 14:07:27 - angular中引用富文本编辑器Ueditor
Angular中使用ueditor富文本编辑器 npm install ngx-ueditor --save把从官网下载下来的uediotor文件放在assets中 在app.module.ts(在其他module.ts中也放一下,以防万一,我没试过) import { UEditorModule } from ngx-ueditor;imports: [U…...
2024/4/21 2:08:26 - angular中使用bootstrap插件
1.angular.json “scripts”: [ “node_modules/jquery/dist/jquery.js”, “node_modules/bootstrap/dist/js/bootstrap.min.js” ] 2.ts declare var $: any;...
2024/4/21 2:08:25 - angular table拖拽插件sortablejs
1、npm 安装 sortablejs npm install sortablejs --save // 只用这一个插件就可以实现拖拽,但是 angular 会报:无法找到模块“sortablejs”的声明文件。 再安装 ngx-sortablejs npm install ngx-sortablejs --save 安装好后在 package.json 里查看一…...
2024/5/5 8:23:13 - angular使用jsencrypt插件
1.首先在angular项目里边安装jsencrypt模块 npm install --save jsencrypt 2.引入使用 import * as JsEncryptModule from jsencrypt; export class RsaUtil {constructor() { }public getSignStr(timestr: string) {let publicKey -----BEGIN PUBLIC KEY-----公钥-----END …...
2024/5/5 5:48:00 - angular 插件angular-hint
angular-hint可以帮助我们写出更好的angular代码,以及更容易定位angular中常见的错误。 使用方式: 1、使用chrome的插件 batarang 2、手动集成angular-hint,通过 npm install angular-hint --save <script type"/to/…...
2024/4/23 13:42:26
最新文章
- 关于图结构这一篇就够了
图(Graph)是一种非线性数据结构,由节点(或顶点,Vertex)和边(Edge)组成。边可能带有权重,表示两个节点之间的某种关系或距离。图结构广泛应用于计算机科学中,如…...
2024/5/6 0:15:31 - 梯度消失和梯度爆炸的一些处理方法
在这里是记录一下梯度消失或梯度爆炸的一些处理技巧。全当学习总结了如有错误还请留言,在此感激不尽。 权重和梯度的更新公式如下: w w − η ⋅ ∇ w w w - \eta \cdot \nabla w ww−η⋅∇w 个人通俗的理解梯度消失就是网络模型在反向求导的时候出…...
2024/3/20 10:50:27 - 【开源社区】openEuler、openGauss、openHiTLS、MindSpore
【开源社区】openEuler、openGauss、openHiTLS、MindSpore 写在最前面开源社区参与和贡献的一般方式开源技术的需求和贡献方向 openEuler 社区:开源系统官方网站官方介绍贡献攻略开源技术需求 openGauss 社区:开源数据库官方网站官方介绍贡献攻略开源技术…...
2024/5/3 9:49:20 - 探索进程控制第一弹(进程终止、进程等待)
文章目录 进程创建初识fork函数fork函数返回值fork常规用法fork调用失败的原因 写时拷贝进程终止进程终止是在做什么?进程终止的情况代码跑完,结果正确/不正确代码异常终止 如何终止 进程等待概述进程等待方法wait方法waitpid 进程创建 初识fork函数 在…...
2024/5/5 1:11:34 - 【LeetCode热题100】【二叉树】二叉树的中序遍历
题目链接:94. 二叉树的中序遍历 - 力扣(LeetCode) 中序遍历就是先遍历左子树再遍历根最后遍历右子树 class Solution { public:void traverse(TreeNode *root) {if (!root)return;traverse(root->left);ans.push_back(root->val);tra…...
2024/5/5 8:39:08 - 【外汇早评】美通胀数据走低,美元调整
原标题:【外汇早评】美通胀数据走低,美元调整昨日美国方面公布了新一期的核心PCE物价指数数据,同比增长1.6%,低于前值和预期值的1.7%,距离美联储的通胀目标2%继续走低,通胀压力较低,且此前美国一季度GDP初值中的消费部分下滑明显,因此市场对美联储后续更可能降息的政策…...
2024/5/4 23:54:56 - 【原油贵金属周评】原油多头拥挤,价格调整
原标题:【原油贵金属周评】原油多头拥挤,价格调整本周国际劳动节,我们喜迎四天假期,但是整个金融市场确实流动性充沛,大事频发,各个商品波动剧烈。美国方面,在本周四凌晨公布5月份的利率决议和新闻发布会,维持联邦基金利率在2.25%-2.50%不变,符合市场预期。同时美联储…...
2024/5/4 23:54:56 - 【外汇周评】靓丽非农不及疲软通胀影响
原标题:【外汇周评】靓丽非农不及疲软通胀影响在刚结束的周五,美国方面公布了新一期的非农就业数据,大幅好于前值和预期,新增就业重新回到20万以上。具体数据: 美国4月非农就业人口变动 26.3万人,预期 19万人,前值 19.6万人。 美国4月失业率 3.6%,预期 3.8%,前值 3…...
2024/5/4 23:54:56 - 【原油贵金属早评】库存继续增加,油价收跌
原标题:【原油贵金属早评】库存继续增加,油价收跌周三清晨公布美国当周API原油库存数据,上周原油库存增加281万桶至4.692亿桶,增幅超过预期的74.4万桶。且有消息人士称,沙特阿美据悉将于6月向亚洲炼油厂额外出售更多原油,印度炼油商预计将每日获得至多20万桶的额外原油供…...
2024/5/4 23:55:17 - 【外汇早评】日本央行会议纪要不改日元强势
原标题:【外汇早评】日本央行会议纪要不改日元强势近两日日元大幅走强与近期市场风险情绪上升,避险资金回流日元有关,也与前一段时间的美日贸易谈判给日本缓冲期,日本方面对汇率问题也避免继续贬值有关。虽然今日早间日本央行公布的利率会议纪要仍然是支持宽松政策,但这符…...
2024/5/4 23:54:56 - 【原油贵金属早评】欧佩克稳定市场,填补伊朗问题的影响
原标题:【原油贵金属早评】欧佩克稳定市场,填补伊朗问题的影响近日伊朗局势升温,导致市场担忧影响原油供给,油价试图反弹。此时OPEC表态稳定市场。据消息人士透露,沙特6月石油出口料将低于700万桶/日,沙特已经收到石油消费国提出的6月份扩大出口的“适度要求”,沙特将满…...
2024/5/4 23:55:05 - 【外汇早评】美欲与伊朗重谈协议
原标题:【外汇早评】美欲与伊朗重谈协议美国对伊朗的制裁遭到伊朗的抗议,昨日伊朗方面提出将部分退出伊核协议。而此行为又遭到欧洲方面对伊朗的谴责和警告,伊朗外长昨日回应称,欧洲国家履行它们的义务,伊核协议就能保证存续。据传闻伊朗的导弹已经对准了以色列和美国的航…...
2024/5/4 23:54:56 - 【原油贵金属早评】波动率飙升,市场情绪动荡
原标题:【原油贵金属早评】波动率飙升,市场情绪动荡因中美贸易谈判不安情绪影响,金融市场各资产品种出现明显的波动。随着美国与中方开启第十一轮谈判之际,美国按照既定计划向中国2000亿商品征收25%的关税,市场情绪有所平复,已经开始接受这一事实。虽然波动率-恐慌指数VI…...
2024/5/4 23:55:16 - 【原油贵金属周评】伊朗局势升温,黄金多头跃跃欲试
原标题:【原油贵金属周评】伊朗局势升温,黄金多头跃跃欲试美国和伊朗的局势继续升温,市场风险情绪上升,避险黄金有向上突破阻力的迹象。原油方面稍显平稳,近期美国和OPEC加大供给及市场需求回落的影响,伊朗局势并未推升油价走强。近期中美贸易谈判摩擦再度升级,美国对中…...
2024/5/4 23:54:56 - 【原油贵金属早评】市场情绪继续恶化,黄金上破
原标题:【原油贵金属早评】市场情绪继续恶化,黄金上破周初中国针对于美国加征关税的进行的反制措施引发市场情绪的大幅波动,人民币汇率出现大幅的贬值动能,金融市场受到非常明显的冲击。尤其是波动率起来之后,对于股市的表现尤其不安。隔夜美国股市出现明显的下行走势,这…...
2024/5/4 18:20:48 - 【外汇早评】美伊僵持,风险情绪继续升温
原标题:【外汇早评】美伊僵持,风险情绪继续升温昨日沙特两艘油轮再次发生爆炸事件,导致波斯湾局势进一步恶化,市场担忧美伊可能会出现摩擦生火,避险品种获得支撑,黄金和日元大幅走强。美指受中美贸易问题影响而在低位震荡。继5月12日,四艘商船在阿联酋领海附近的阿曼湾、…...
2024/5/4 23:54:56 - 【原油贵金属早评】贸易冲突导致需求低迷,油价弱势
原标题:【原油贵金属早评】贸易冲突导致需求低迷,油价弱势近日虽然伊朗局势升温,中东地区几起油船被袭击事件影响,但油价并未走高,而是出于调整结构中。由于市场预期局势失控的可能性较低,而中美贸易问题导致的全球经济衰退风险更大,需求会持续低迷,因此油价调整压力较…...
2024/5/4 23:55:17 - 氧生福地 玩美北湖(上)——为时光守候两千年
原标题:氧生福地 玩美北湖(上)——为时光守候两千年一次说走就走的旅行,只有一张高铁票的距离~ 所以,湖南郴州,我来了~ 从广州南站出发,一个半小时就到达郴州西站了。在动车上,同时改票的南风兄和我居然被分到了一个车厢,所以一路非常愉快地聊了过来。 挺好,最起…...
2024/5/4 23:55:06 - 氧生福地 玩美北湖(中)——永春梯田里的美与鲜
原标题:氧生福地 玩美北湖(中)——永春梯田里的美与鲜一觉醒来,因为大家太爱“美”照,在柳毅山庄去寻找龙女而错过了早餐时间。近十点,向导坏坏还是带着饥肠辘辘的我们去吃郴州最富有盛名的“鱼头粉”。说这是“十二分推荐”,到郴州必吃的美食之一。 哇塞!那个味美香甜…...
2024/5/4 23:54:56 - 氧生福地 玩美北湖(下)——奔跑吧骚年!
原标题:氧生福地 玩美北湖(下)——奔跑吧骚年!让我们红尘做伴 活得潇潇洒洒 策马奔腾共享人世繁华 对酒当歌唱出心中喜悦 轰轰烈烈把握青春年华 让我们红尘做伴 活得潇潇洒洒 策马奔腾共享人世繁华 对酒当歌唱出心中喜悦 轰轰烈烈把握青春年华 啊……啊……啊 两…...
2024/5/4 23:55:06 - 扒开伪装医用面膜,翻六倍价格宰客,小姐姐注意了!
原标题:扒开伪装医用面膜,翻六倍价格宰客,小姐姐注意了!扒开伪装医用面膜,翻六倍价格宰客!当行业里的某一品项火爆了,就会有很多商家蹭热度,装逼忽悠,最近火爆朋友圈的医用面膜,被沾上了污点,到底怎么回事呢? “比普通面膜安全、效果好!痘痘、痘印、敏感肌都能用…...
2024/5/5 8:13:33 - 「发现」铁皮石斛仙草之神奇功效用于医用面膜
原标题:「发现」铁皮石斛仙草之神奇功效用于医用面膜丽彦妆铁皮石斛医用面膜|石斛多糖无菌修护补水贴19大优势: 1、铁皮石斛:自唐宋以来,一直被列为皇室贡品,铁皮石斛生于海拔1600米的悬崖峭壁之上,繁殖力差,产量极低,所以古代仅供皇室、贵族享用 2、铁皮石斛自古民间…...
2024/5/4 23:55:16 - 丽彦妆\医用面膜\冷敷贴轻奢医学护肤引导者
原标题:丽彦妆\医用面膜\冷敷贴轻奢医学护肤引导者【公司简介】 广州华彬企业隶属香港华彬集团有限公司,专注美业21年,其旗下品牌: 「圣茵美」私密荷尔蒙抗衰,产后修复 「圣仪轩」私密荷尔蒙抗衰,产后修复 「花茵莳」私密荷尔蒙抗衰,产后修复 「丽彦妆」专注医学护…...
2024/5/4 23:54:58 - 广州械字号面膜生产厂家OEM/ODM4项须知!
原标题:广州械字号面膜生产厂家OEM/ODM4项须知!广州械字号面膜生产厂家OEM/ODM流程及注意事项解读: 械字号医用面膜,其实在我国并没有严格的定义,通常我们说的医美面膜指的应该是一种「医用敷料」,也就是说,医用面膜其实算作「医疗器械」的一种,又称「医用冷敷贴」。 …...
2024/5/4 23:55:01 - 械字号医用眼膜缓解用眼过度到底有无作用?
原标题:械字号医用眼膜缓解用眼过度到底有无作用?医用眼膜/械字号眼膜/医用冷敷眼贴 凝胶层为亲水高分子材料,含70%以上的水分。体表皮肤温度传导到本产品的凝胶层,热量被凝胶内水分子吸收,通过水分的蒸发带走大量的热量,可迅速地降低体表皮肤局部温度,减轻局部皮肤的灼…...
2024/5/4 23:54:56 - 配置失败还原请勿关闭计算机,电脑开机屏幕上面显示,配置失败还原更改 请勿关闭计算机 开不了机 这个问题怎么办...
解析如下:1、长按电脑电源键直至关机,然后再按一次电源健重启电脑,按F8健进入安全模式2、安全模式下进入Windows系统桌面后,按住“winR”打开运行窗口,输入“services.msc”打开服务设置3、在服务界面,选中…...
2022/11/19 21:17:18 - 错误使用 reshape要执行 RESHAPE,请勿更改元素数目。
%读入6幅图像(每一幅图像的大小是564*564) f1 imread(WashingtonDC_Band1_564.tif); subplot(3,2,1),imshow(f1); f2 imread(WashingtonDC_Band2_564.tif); subplot(3,2,2),imshow(f2); f3 imread(WashingtonDC_Band3_564.tif); subplot(3,2,3),imsho…...
2022/11/19 21:17:16 - 配置 已完成 请勿关闭计算机,win7系统关机提示“配置Windows Update已完成30%请勿关闭计算机...
win7系统关机提示“配置Windows Update已完成30%请勿关闭计算机”问题的解决方法在win7系统关机时如果有升级系统的或者其他需要会直接进入一个 等待界面,在等待界面中我们需要等待操作结束才能关机,虽然这比较麻烦,但是对系统进行配置和升级…...
2022/11/19 21:17:15 - 台式电脑显示配置100%请勿关闭计算机,“准备配置windows 请勿关闭计算机”的解决方法...
有不少用户在重装Win7系统或更新系统后会遇到“准备配置windows,请勿关闭计算机”的提示,要过很久才能进入系统,有的用户甚至几个小时也无法进入,下面就教大家这个问题的解决方法。第一种方法:我们首先在左下角的“开始…...
2022/11/19 21:17:14 - win7 正在配置 请勿关闭计算机,怎么办Win7开机显示正在配置Windows Update请勿关机...
置信有很多用户都跟小编一样遇到过这样的问题,电脑时发现开机屏幕显现“正在配置Windows Update,请勿关机”(如下图所示),而且还需求等大约5分钟才干进入系统。这是怎样回事呢?一切都是正常操作的,为什么开时机呈现“正…...
2022/11/19 21:17:13 - 准备配置windows 请勿关闭计算机 蓝屏,Win7开机总是出现提示“配置Windows请勿关机”...
Win7系统开机启动时总是出现“配置Windows请勿关机”的提示,没过几秒后电脑自动重启,每次开机都这样无法进入系统,此时碰到这种现象的用户就可以使用以下5种方法解决问题。方法一:开机按下F8,在出现的Windows高级启动选…...
2022/11/19 21:17:12 - 准备windows请勿关闭计算机要多久,windows10系统提示正在准备windows请勿关闭计算机怎么办...
有不少windows10系统用户反映说碰到这样一个情况,就是电脑提示正在准备windows请勿关闭计算机,碰到这样的问题该怎么解决呢,现在小编就给大家分享一下windows10系统提示正在准备windows请勿关闭计算机的具体第一种方法:1、2、依次…...
2022/11/19 21:17:11 - 配置 已完成 请勿关闭计算机,win7系统关机提示“配置Windows Update已完成30%请勿关闭计算机”的解决方法...
今天和大家分享一下win7系统重装了Win7旗舰版系统后,每次关机的时候桌面上都会显示一个“配置Windows Update的界面,提示请勿关闭计算机”,每次停留好几分钟才能正常关机,导致什么情况引起的呢?出现配置Windows Update…...
2022/11/19 21:17:10 - 电脑桌面一直是清理请关闭计算机,windows7一直卡在清理 请勿关闭计算机-win7清理请勿关机,win7配置更新35%不动...
只能是等着,别无他法。说是卡着如果你看硬盘灯应该在读写。如果从 Win 10 无法正常回滚,只能是考虑备份数据后重装系统了。解决来方案一:管理员运行cmd:net stop WuAuServcd %windir%ren SoftwareDistribution SDoldnet start WuA…...
2022/11/19 21:17:09 - 计算机配置更新不起,电脑提示“配置Windows Update请勿关闭计算机”怎么办?
原标题:电脑提示“配置Windows Update请勿关闭计算机”怎么办?win7系统中在开机与关闭的时候总是显示“配置windows update请勿关闭计算机”相信有不少朋友都曾遇到过一次两次还能忍但经常遇到就叫人感到心烦了遇到这种问题怎么办呢?一般的方…...
2022/11/19 21:17:08 - 计算机正在配置无法关机,关机提示 windows7 正在配置windows 请勿关闭计算机 ,然后等了一晚上也没有关掉。现在电脑无法正常关机...
关机提示 windows7 正在配置windows 请勿关闭计算机 ,然后等了一晚上也没有关掉。现在电脑无法正常关机以下文字资料是由(历史新知网www.lishixinzhi.com)小编为大家搜集整理后发布的内容,让我们赶快一起来看一下吧!关机提示 windows7 正在配…...
2022/11/19 21:17:05 - 钉钉提示请勿通过开发者调试模式_钉钉请勿通过开发者调试模式是真的吗好不好用...
钉钉请勿通过开发者调试模式是真的吗好不好用 更新时间:2020-04-20 22:24:19 浏览次数:729次 区域: 南阳 > 卧龙 列举网提醒您:为保障您的权益,请不要提前支付任何费用! 虚拟位置外设器!!轨迹模拟&虚拟位置外设神器 专业用于:钉钉,外勤365,红圈通,企业微信和…...
2022/11/19 21:17:05 - 配置失败还原请勿关闭计算机怎么办,win7系统出现“配置windows update失败 还原更改 请勿关闭计算机”,长时间没反应,无法进入系统的解决方案...
前几天班里有位学生电脑(windows 7系统)出问题了,具体表现是开机时一直停留在“配置windows update失败 还原更改 请勿关闭计算机”这个界面,长时间没反应,无法进入系统。这个问题原来帮其他同学也解决过,网上搜了不少资料&#x…...
2022/11/19 21:17:04 - 一个电脑无法关闭计算机你应该怎么办,电脑显示“清理请勿关闭计算机”怎么办?...
本文为你提供了3个有效解决电脑显示“清理请勿关闭计算机”问题的方法,并在最后教给你1种保护系统安全的好方法,一起来看看!电脑出现“清理请勿关闭计算机”在Windows 7(SP1)和Windows Server 2008 R2 SP1中,添加了1个新功能在“磁…...
2022/11/19 21:17:03 - 请勿关闭计算机还原更改要多久,电脑显示:配置windows更新失败,正在还原更改,请勿关闭计算机怎么办...
许多用户在长期不使用电脑的时候,开启电脑发现电脑显示:配置windows更新失败,正在还原更改,请勿关闭计算机。。.这要怎么办呢?下面小编就带着大家一起看看吧!如果能够正常进入系统,建议您暂时移…...
2022/11/19 21:17:02 - 还原更改请勿关闭计算机 要多久,配置windows update失败 还原更改 请勿关闭计算机,电脑开机后一直显示以...
配置windows update失败 还原更改 请勿关闭计算机,电脑开机后一直显示以以下文字资料是由(历史新知网www.lishixinzhi.com)小编为大家搜集整理后发布的内容,让我们赶快一起来看一下吧!配置windows update失败 还原更改 请勿关闭计算机&#x…...
2022/11/19 21:17:01 - 电脑配置中请勿关闭计算机怎么办,准备配置windows请勿关闭计算机一直显示怎么办【图解】...
不知道大家有没有遇到过这样的一个问题,就是我们的win7系统在关机的时候,总是喜欢显示“准备配置windows,请勿关机”这样的一个页面,没有什么大碍,但是如果一直等着的话就要两个小时甚至更久都关不了机,非常…...
2022/11/19 21:17:00 - 正在准备配置请勿关闭计算机,正在准备配置windows请勿关闭计算机时间长了解决教程...
当电脑出现正在准备配置windows请勿关闭计算机时,一般是您正对windows进行升级,但是这个要是长时间没有反应,我们不能再傻等下去了。可能是电脑出了别的问题了,来看看教程的说法。正在准备配置windows请勿关闭计算机时间长了方法一…...
2022/11/19 21:16:59 - 配置失败还原请勿关闭计算机,配置Windows Update失败,还原更改请勿关闭计算机...
我们使用电脑的过程中有时会遇到这种情况,当我们打开电脑之后,发现一直停留在一个界面:“配置Windows Update失败,还原更改请勿关闭计算机”,等了许久还是无法进入系统。如果我们遇到此类问题应该如何解决呢࿰…...
2022/11/19 21:16:58 - 如何在iPhone上关闭“请勿打扰”
Apple’s “Do Not Disturb While Driving” is a potentially lifesaving iPhone feature, but it doesn’t always turn on automatically at the appropriate time. For example, you might be a passenger in a moving car, but your iPhone may think you’re the one dri…...
2022/11/19 21:16:57