angular 5でクラッドアプリを作成しているときに、同じフォームビルダーを使用して、必要に応じて取得するフォームコントロールを変更し、ユーザーを追加または更新する方法を教えてください。フォームを通して...
ここにいくつかの単純なコードがあります。私は多くの属性を持つかなり大きなフォームを持っているので、物事を複雑にしないように努めます...
だから私のapp.component.htmlにはフォームがあります
<form class="form-horizontal" [formGroup]="form" #myForm="ngForm"
(ngSubmit)="save()">
<div class="form-group">
<label for="firstName" class="control-label
required">First name</label>
<input type="text" id="firstName" class="form-control"
formControlName="firstName">
</div>
<div class="form-group">
<label for="lastName" class="control-label
required">Last name</label>
<input type="text" id="lastName" class="form-control"
formControlName="lastName">
</div>
そして私のapp.component.tsに
私のコンストラクターでは
this.form = this.formBuilder.group({
firstName: ['', [Validators.required, Validators.minLength(2),
Validators.pattern(/^[a-zA-Z]+$/)]],
lastName: ['', [Validators.required, Validators.minLength(2),
Validators.pattern(/^[a-zA-Z]+$/)]],
});
フォームを送信するためのsave()関数
save() {
let formModel = this.form.value;
formModel.id = this.Id;
if (this.Id == null) {
this._usermanagementservice.addEmployee(formModel).subscribe(() => {
//function that reloads table with employees
this.LoadAllEmployees();
});
}
else {
this._usermanagementservice.updateEmployee(this.Id, formModel).subscribe(() => {
this.LoadAllEmployees();
});
}
}
すべてが機能することに注意してください、他のフィールドは含めていませんが、ここに質問があります。ユーザーの追加時に名前フィールドのフォームのみを含め、更新するための姓のみをどのように含めることができますか? (簡単にするために、この例では姓と名を使用しています)
よろしくお願いします。詳細情報が必要な場合は、喜んでPsを提供します。英語は私の二次言語なので、フィールド、フォームなどの用語は確かに正しくありません。うまくいけば、ポイントがわかります
最初に、オプションのテンプレートベースのグループを作成できます。テンプレートで* ngIfを使用して、フォーム内の要素のグループの表示と非表示を切り替えることができます。次にformBuilderを使用して、有効になっているフォームコントロールのオブジェクトのみを渡すたびにフォームのフォームインスタンスを作成します。
テンプレート
<form [formGroup]="myForm" (ngSubmit)="onSubmit()">
<label for="name">First Name:</label>
<input type="text" formControlName="fname"
placeholder="Enter name">
<br /><br />
<div *ngIf="lNameEmail1">
<label for="name">Last Name:</label>
<input type="text" formControlName="lname"
placeholder="Enter name">
<br /><br />
<label for="email">Email:</label>
<input type="email" formControlName="email"
placeholder="Enter email">
</div>
<div *ngIf="lNameEmail2">
<label for="name">Last Name2:</label>
<input type="text" formControlName="lname2"
placeholder="Enter name">
<br /><br />
<label for="email">Email2:</label>
<input type="email" formControlName="email2"
placeholder="Enter email">
</div>
<br /><br />
<button type="submit" [disabled]="!myForm.valid">Submit
</button>
<button type="submit" (click)='formGrp1()'> Form 1</button>
<button type="submit" (click)='formGrp2()'> Form 2</button>
</form>
Angularクラス
export class AppComponent implements AfterViewInit {
public myForm: FormGroup;
lNameEmail1 = false;
lNameEmail2 = false;
myFormProperty1 = {
"fname": new FormControl("", Validators.required)
};
myFormProperty2 = {
"fname": new FormControl("", Validators.required),
"lname": new FormControl("", Validators.required),
"email": new FormControl("")
};
myFormProperty3 = {
"fname": new FormControl("", Validators.required),
"lname2": new FormControl("", Validators.required),
"email2": new FormControl("")
};
constructor(public fb: FormBuilder) {
this.myForm = this.fb.group(this.myFormProperty1);
}
formGrp1(){
alert('Form 1 enable')
this.lNameEmail1 = true;
this.lNameEmail2 = false;
this.myForm = this.fb.group(this.myFormProperty2);
this.myForm.valueChanges.subscribe(data =>
console.log('form object ====' + JSON.stringify(data)
));
}
formGrp2(){
alert('Form 2 enable')
this.lNameEmail1 = false;
this.lNameEmail2 = true;
this.myForm = this.fb.group(this.myFormProperty3);
this.myForm.valueChanges.subscribe(data =>
console.log('form object ====' + JSON.stringify(data)
));
}
onSubmit() {
console.log('Form submitted Value=='+ JSON.stringify(this.myForm.value));
}
}
FormGroup
API はaddControl
やremoveControl
などのメソッドを公開します。これらを使用して、初期化された後にフォームグループにコントロールを追加または削除できます。 。
これらのメソッドを使用した例は次のようになります。
formMode: 'add' | 'update';
userForm: FormGroup;
ngOnInit() {
this.form = this.formBuilder.group({
firstName: [''],
lastName: ['']
});
}
changeMode(mode: 'add' | 'update') {
if (mode === 'add') {
if (!this.form.get('firstName')) {
this.form.addControl('firstName');
}
this.form.removeControl('lastName');
} else {
if (!this.form.get('lastName')) {
this.form.addControl('lastName');
}
this.form.removeControl('firstName');
}
}
onChange(event: 'add' | 'update') {
this.changeMode(event);
}
おそらく、特定のコントロールの存在に基づいて*ngIf
チェックを追加することにより、DOMにフォームの状態を反映させる必要があります。
<input *ngIf="form.get('lastName')" formControlName="lastName">
addControl RemoveControl uを使用すると、フィールドの表示と非表示を切り替えることができます。
<div>
<label>Description<i class="fa fa-pencil" aria-hidden="true" (click)="editField(formControlKeys.description)"></i></label>
<h6 *ngIf="!detailForm.controls.description; else showDescriptionField">{{ projectData?.description }}</h6>
<ng-template #showDescriptionField>
<textarea formControlName="description" class="form-control" rows="2"></textarea>
<i class="fa fa-close" (click)="removeDescriptionControl()"></i>
</ng-template>
</div>
コントロールを追加:
editField(this.formControlKeys.description){
this.detailForm.addControl('description', new FormControl(''));
this.detailForm.controls['description'].setValue(this.projectData.description);
}
コントロールを削除:
removeDescriptionControl() {
this.detailForm.removeControl('description');
}
最初にフォームグループを作成します。
this.detailForm = this.formBuilder.group({
});
formControlKeysを設定します。
formControlKeys = {
description: 'description'
};
これは、条件付きangularフォームコントロールの追加/削除の最も単純な複製です。
someCheckboxControl
という名前のチェックボックスコントロールを持つフォームがあることを確認して、他のコントロールを追加/削除するためのブール値の変更を監視します。
ngOnInit() {
this.form.controls['someCheckboxControl'].valueChanges.subscribe(someCheckboxControlVal => {
if (someCheckboxControlVal) {
this.form.addControl('SomeControl', new FormControl('', Validators.required));
} else {
this.form.removeControl('SomeControl');
}
});
}
HTML
<input *ngIf="form.get('someCheckboxControl').value" formControlName="remoteLocations"</input>