Creating a new Form element in ajaxcallback function not affecting form state

Question

I am trying to insert new form fields into exiting wrapper within ajax callback function.

I succeeded doing so, but trying to get those new fields values inside submit function failed because they are listed in the form state values array.

How can I make their values available to be used inside the submit function.

$form['test'] = array(
        '#type' => 'select',
        '#options' => array('- Please select -' => [1=>'one',2=>'two']),
        '#ajax' => array(
            'callback' => '::testSelectedCallback',
            'wrapper' => 'fields-wrapper',
            'effect' => 'fade',
            'event' => 'change',
            'progress' => array(
                'type' => 'throbber',
                'message' => NULL,
            ),
        ),
    );
$form['fields-wrapper'] = array(
        '#type' => 'container',
        '#attributes' => ['id' => 'fields-wrapper', 'class' => ['hiddenselect']],
    );

public function testSelectedCallback(array &$form, FormStateInterface $form_state) {
$form['fields-wrapper']['new_item']= array(
'#type' => 'textfield',
'#title' => 'My new item',
);
$form_state->setRebuild(True);
return $form['new_item'];
}

Answer 1

You cannot add fields in ajax callback functions - assuming that level2SelectedCallback() is your ajax callback (you named it something different in your form element defintion).

All form elements need to be added in the form definition. The ajax callback is only used for determining which elements need to be inserted into the page when the AJAX is returned.