> ## Documentation Index
> Fetch the complete documentation index at: https://help.dingtalk.io/llms.txt
> Use this file to discover all available pages before exploring further.

# フォームの基本

> YiDA プラットフォームでフォームを編集する方法を解説します。コンポーネントの基本設定、タイトル・プレースホルダー・説明などの属性設定、状態管理やデフォルト値、必須項目やカスタム関数によるバリデーションルールの設定手順を紹介します。

## 1. はじめに

フォーム左側のパネルからコンポーネントを中央のデザインエリアにドラッグし、右側で基本設定を行います。この設定を利用して、フォームコンポーネントをパーソナライズできます。たとえば、表示フィールドの変更、フォームレイアウトの調整、フォーム外観のカスタマイズなどが可能です。

**パス**：ワークベンチ >> YiDA >> マイアプリ >> フォーム >> 右上の**編集**をクリック。

フォームを編集します。

フォーム編集ページ。

## 2. 属性

**パス**：コンポーネントを選択 >> 右側に属性とプレミアム設定が表示されます。

コンポーネントを追加します。

### 2.1 タイトル

コンポーネントの名称です。デフォルトでは、タイトルはコンポーネントのタイプ名と同じに設定されており、ユーザーが入力内容を識別しやすくなっています。

コンポーネントのタイトルを変更します。

タイトルを空欄のままにすると、タイトルは非表示となり、入力ボックスのみが表示されます。

空のタイトル。

### 2.2 プレースホルダー

プレースホルダーは、コンポーネントに入力すべき内容を説明します。ガイド用のテキストであり、フィールド値には影響しません。

例：「学生の名前を入力してください」

### 2.3 説明

説明では、コンポーネントに関する補足情報を提供します。コンポーネントの機能・スコープ・入力手順の解説によく利用されます。テキストの入力やリンクの挿入が可能です。

### 2.4 状態

フィールドコンポーネントのデフォルト状態を設定します。権限を通じて状態を制御することも可能です。

例：

コンポーネントの状態。

* **通常**：表示され、編集可能です。

* **無効**：表示されますが、編集はできません。閲覧のみとは異なり、フィールドの属性は表示されます。

* **閲覧のみ**：表示されますが、編集はできません。

* **非表示**：フィールドは表示されず、編集もできません。

### 2.5 デフォルト

デフォルト値とは、ユーザーがフォームを開いたときにフィールドに設定される値のことです。

一部のコンポーネントでは、カスタム、クイック設定、数式、データ連動、他のフォームデータとの関連、ゲートウェイデータ、またはデータソースの検索を設定できます。

* **カスタム**：固定値を設定します。ユーザーはフォーム入力時にこの値を削除して、新しいデータを入力できます。

例：

コンポーネントのデフォルト。

* **高度な使い方**：データソースの値をデフォルトとして書き込みます。

* **数式**

デフォルトに数式を設定します。

* **クイック設定**：YiDA では、一般的な設定シナリオ向けのショートカットを提供しています。

* **データ連動**

データ連動。

* **他のフォームデータとの関連**

他のフォームデータとの関連。

* **ゲートウェイデータ**

API はパブリックネットワークから呼び出し可能である必要があり、レスポンス形式は `[{"text":"111","value":"111"}]` である必要があります。

* **データソースの検索**

この API は、ユーザーがコンポーネントに値を入力して検索を行った場合にのみトリガーされます。

データソースの検索。

### 2.6 バリデーション

すべてのフィールドタイプのコンポーネントに、必須およびカスタム関数によるバリデーションを設定できます。

バリデーション（必須、カスタム関数）。

#### 2.6.1 必須

必須とは、データを送信する前にフィールドへの入力が求められることを意味します。入力がない場合は送信が失敗し、「XX は必須項目です。」というメッセージが表示されます。

必須。

#### 2.6.2 最小値

許可されるデータの最小値です。たとえば、数値コンポーネントの最小値を 4 に設定すると、入力値は 4 未満にはできません。

**対応コンポーネントタイプ：数値**

最小値。

#### 2.6.3 最大値

許可されるデータの最大値です。たとえば、数値コンポーネントの最大値を 50 に設定すると、入力値は 50 を超えることはできません。

**対応コンポーネントタイプ：数値**

最大値。

#### 2.6.4 最小長

データの最小長です。たとえば、一行テキストフィールドの最小長を 2 に設定すると、入力には少なくとも 2 文字が必要になります。

**対応コンポーネントタイプ：数値、一行テキスト、複数行テキスト**。

最小長。

#### 2.6.5 最大長

データの最大長です。たとえば、ドロップダウン複数選択コンポーネントの最大長を 2 に設定すると、データ送信時に 2 つを超える選択肢を選ぶことはできません。

**対応コンポーネントタイプ：数値、一行テキスト、複数行テキスト、チェックボックス、ドロップダウン複数選択、部門、関連フォーム。**

最大長。

#### 2.6.6 カスタム関数（プレミアムバリデーション）

基本的なコーディングスキルがあることが望ましいですが、開発者でない方も以下のコードサンプルを再利用できます。

**例 1**：入力に「雨」が含まれているかを確認します。

**注意**：カスタム関数バリデーションのエラーメッセージは必須項目です。設定しない場合、バリデーションが正しく動作しない可能性があります。

カスタム関数を設定します。

以下の JavaScript コードを参考としてコピーできます。

```javascript theme={"theme":{"light":"github-light","dark":"github-dark"}}
// 入力に「雨」が含まれているかどうか
function validateRule(value) {
  if (value.indexOf('雨') > -1) {
    return true;
  }
  return false;
}
```

**例 2**：入力が「杭州」で始まるかを確認します。

```javascript theme={"theme":{"light":"github-light","dark":"github-dark"}}
// 入力が「杭州」で始まるかどうか
function validateRule(value) {
  if (/^杭州/.test(value)) {
    return true;
  }
  return false;
}
```

**その他の例：**

```javascript theme={"theme":{"light":"github-light","dark":"github-dark"}}
// 入力に空白が含まれているかどうか
function validateRule(value) {
  if(/s/.test(value)){
    return false;
  }
  return true;
}
```

```javascript theme={"theme":{"light":"github-light","dark":"github-dark"}}
// 入力が銀行カード番号かどうか（基本的な長さチェック）
function validateRule(value) {
  var regExp = /^([1-9]{1})(d{15}|d{18})$/;
  return regExp.test(value)
}
```

```javascript theme={"theme":{"light":"github-light","dark":"github-dark"}}
// 入力が標準的な銀行カード番号かどうか（中国本土の銀聯カード）
function validateRule(value) {
  value = (value + '').replace(/D+/g, '')
  const regExp = /^([1-9])(d{15}|d{18})$/
  // 0で始まらず、長さが正しいことを確認する
  if (!regExp.test(value)) {
    return false
  }
  value = value.split('').reverse();
  let total = 0
  for (let i = 0; i < value.length; i++) {
    value[i] = parseInt(value[i]);
    total += i % 2 ? 2 * value[i] - (value[i] > 4 ? 9 : 0) : value[i];
  }
  if (total === 0) {
    return false;
  }
  return (total % 10) === 0;
 }
```

シンプルな銀行カードバリデーションのソリューションをご提供いただいた @n233333 様に感謝いたします。

#### 2.6.7 エラーメッセージ

フィールドバリデーションに失敗すると、エラーが発生し送信がブロックされます。

**注意**：このフィールドは任意です。空欄のままにすると、デフォルトのメッセージ「This field is required」が表示されます。

エラーメッセージ。

## 3. プレミアム

### 3.1 一意識別子

現在のフィールドの一意識別子は、YiDA バックエンドでのデータ保存やプログラムによる制御に使用されます。各コンポーネントの ID カードのような役割を果たし、すべてのコンポーネントで異なる一意識別子を持ちます。通常は変更する必要はなく、デフォルトではシステム生成の値が設定されます。

<Note>
  フィールドの一意識別子（fieldId）は、YiDA がフィールドを参照する際に使用されます。変更すると、このフィールドを使用する数式、データ保存（データが失われる可能性もあります）、および JS 関数の参照に影響を及ぼします。変更は**強くお勧めしません**。
</Note>

コンポーネントの一意識別子。

### 3.2 マルチデバイス表示

一部のコンポーネントにはこのオプションがあり、コンポーネントをデスクトップまたはモバイルで表示するかを制御できます。

**注意**：このオプションを設定した場合、コードから現在のコンポーネントインスタンスを取得すると `null` が返されます。

マルチデバイス表示。

* **デフォルト**：デスクトップとモバイルの両方でコンポーネントを表示します。

* デスクトップのみでコンポーネントを表示します。

* モバイルのみでコンポーネントを表示します。

### 3.3 データ送信

一部のコンポーネントにはこの属性があり、フォーム送信時にコンポーネントの値を送信するかを制御できます。

* **表示されているときのみ送信**：コンポーネントが非表示の場合、そのデータはデフォルトではバックエンドに送信されません。
* **常に送信**：コンポーネントが表示されているかどうかにかかわらず、フィールドデータを送信します。

データ送信。

### 3.4 操作設定

操作を作成することで、ユーザーが現在のフィールドコンポーネントを操作した際に動作をトリガーできます。たとえば、ユーザーがこのフィールドの編集を終えて次のフィールドに移動した際に、アナリティクスイベントを送信することが可能です。

操作設定 — 操作を作成。

**注意**：新しい操作を追加しても、コンポーネントの元の動作には影響しません。たとえば、コンポーネントを必須に設定している場合でも、コンポーネントからフォーカスが外れた際にバリデーションが実行され、操作設定内の関数もトリガーされます。

詳しくは [JS アクションパネル - フロントエンドコードのオープン](/ja/yida/developer-features/ocmxyv) をご覧ください。

### 3.5 削除とコピー

**お知らせ：コンポーネントの削除は慎重に行ってください。フォームフィールドを削除すると、数式、業務関連ルール、その他の設定が無効になる可能性があります。**

**アプリがまだ構築中で公開されておらず、データもない場合は、フィールドを削除しても影響はほとんどありません。**

**アプリがすでに公開されておりデータがある場合、フィールドの削除はお勧めしません。設定済みの数式や業務関連ルールが無効になり、関連するフィールドデータが失われる可能性があります。代わりに、フィールドを非表示に設定してください。手順は以下のとおりです。**

**フォーム編集ページで >> フィールドを選択 >> 属性 >>** [**状態**](/ja/yida/form/snftao)

**削除・コピーのパス**：コンポーネントをクリック >> 削除またはコピー（下図参照）：

コンポーネントをコピーします。

コンポーネントを削除します。

### 3.6 コンポーネントの編集

**パス**：フォーム編集ページで、コンポーネントをダブルクリックして名前を編集します。

コンポーネントを編集します。

### 3.7 コンポーネントのコピーと貼り付け（ページ間で動作）

<Warning>
  ⚠️ 同じタイプのページ内でコンポーネントを貼り付けることをお勧めします。異なるタイプのページ間でコンポーネントを貼り付けると、予期しないバグが発生したり、コンポーネントが使用できなくなる可能性があります。ページ間のコピーによって生じた問題はご自身で解決していただく必要があります。
</Warning>

現在のページで `Ctrl+C` を使ってコンポーネントをコピーし、`Ctrl+V` で貼り付けます。（`Mac` では `Command` キーを使用してください。）

## 4. よくある質問

<AccordionGroup>
  <Accordion id="q1" title="4.1 フォームページあたりのコンポーネントの最大数は？">
    1 ページあたりのコンポーネントが多すぎると、パフォーマンスとユーザー体験に影響します。良好な体験を維持するため、1 ページ内のコンポーネント数は少なめに抑えることをお勧めします。Freeプランでは 1 ページあたり最大 50 個、その他のプランでは最大 300 個のコンポーネントに対応しています。それ以上必要な場合は、業務シナリオに応じてフォームを複数ページに分割してください。
  </Accordion>

  <Accordion id="q2" title="4.2 必須設定が反映されないのはなぜですか？">
    コンポーネントの状態が閲覧のみに設定されていないかご確認ください。コンポーネントが閲覧のみで必須としてマークされている場合、必須設定は反映されません。
  </Accordion>
</AccordionGroup>

## 5. 関連トピック

[データ連動](/ja/yida/form/arpur0)

[他のフォームデータとの関連](/ja/yida/form/tg64d5)

[関連オプションの設定](/ja/yida/form/pw4kp6)

[フォームの業務ルール](/ja/yida/form/dssg6y)

[フォームのバリデーション](/ja/yida/form/un1t9v)

非表示フィールドへの値の割り当て